問題
リストの丸数字を途中から始めるには？
解決策
「counter-reset: カウンター名 開始したい数値;」をリストの大元に設定する。
「counter」を途中から始める。
リストの丸数字を1からではなく、途中の数字から始める方法をご紹介します。
※こちらはlist-styleではなく、counterを使った例となります。
今回は以下の記事の応用になります。
ol等のリストを丸数字で表示させて、CSSでカスタマイズさせる
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;
}
コメント