問題 × 解決策

リストの丸数字を途中から始める

問題

リストの丸数字を途中から始めるには?

解決策

「counter-reset: カウンター名 開始したい数値;」をリストの大元に設定する。

 

「counter」を途中から始める。

リストの丸数字を1からではなく、途中の数字から始める方法をご紹介します。
※こちらはlist-styleではなく、counterを使った例となります。

DEMOはこちら

  • リスト
  • リスト
  • リスト
  • リスト
  • リスト
  • リスト

HTMLの構築

クラス「listmark-num」のリストを用意します。
そのリストにクラス「later5」を設定します。

<ul class="listmark-num later5">
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
	<li>リスト</li>
</ul>

cssの構築

クラス「later5」に対して、カウンターのリセットと同時に半角スペースを空けて、開始したい数値を入れます。

.listmark-num{
    counter-reset: my-counter;
    padding: 0;
}
.listmark-num.later5{
    counter-reset: my-counter 5;
    padding: 0;
}
.listmark-num > li{
    padding-left: 30px;
}
.listmark-num > li:before {
    content: counter(my-counter);
    counter-increment: my-counter;
    background-color: #FCECE8;
    display: block;
    float: left;
    margin-top:3px;
    color: #F15A24;
    font-size: 65%;
	font-weight: bold;
    letter-spacing: -0.5pt;
    text-indent: -0.5pt;
    line-height: 20px;
    margin-left: -30px;
    text-align: center;
    height: 20px;
    width: 20px;
    border-radius: 50%;
}
.listmark-num > li:after{
    content: "";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

eighteen − six =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧