【CSS】counter-incrementで「01、02、03」のように先頭に0を付ける方法

CSSで「counter-increment」を使うと、リストや見出しに「1、2、3...」と自動的に連番を付けることができます。

<ul class="list-count1">
    <li>サンプルテキストサンプルテキスト</li>
    <li>サンプルテキストサンプルテキスト</li>
    <li>サンプルテキストサンプルテキスト</li>
    …
</ul>

.list-count1 li{
    counter-increment: mycounter;
}
.list-count1 li:before {
    content: counter(mycounter);
}

通常はこのように「1、2、3...10、11」とカウントアップされますが、「01、02、03」のように1桁のとき先頭に0を付けて2桁表示にしたい、もしくは「001、002、003」のように3桁表示にしたいという場面もあると思います。

「01、02、03」のような2桁表示にする

「content: counter(mycounter)」の部分にコンマ区切りで「decimal-leading-zero」を追加すると「01、02、03」のような2桁表示にすることができます。

「list-style-type」で使う値と同じなので見覚えがある人もいるかもしれませんね。

.list-count2 li{
    counter-increment: mycounter;
}
.list-count2 li:before {
    content: counter(mycounter, decimal-leading-zero);
}

「001、002、003」のような3桁表示にする

3桁に増やすには「content: '0' counter(mycounter,decimal-leading-zero);」のように先頭に0を足して、100を超えたときに0をとってあげればOKです。

.list-count3 li{
    counter-increment: mycounter;
}
.list-count3 li:before {
    content: '0' counter(mycounter,decimal-leading-zero);
}
.list-count3 li:nth-child(n+100):before {
    content: counter(mycounter);
}

これ以上はちょっと使い道が思いつきませんが、「0001、0002、0003...」のように4桁にしたい場合は、以下のようにするとできます。あとは何桁になっても同じ要領ですね。

.list-count4 li{
    counter-increment: mycounter;
}
.list-count4 li:before {
    content: '00' counter(mycounter,decimal-leading-zero);
}
.list-count4 li:nth-child(n+100):before {
    content: '0' counter(mycounter,decimal-leading-zero);
}
.list-count4 li:nth-child(n+1000):before {
    content: counter(mycounter);
}