[css]疑似要素に連番を付与する方法

簡単だけどたまにしか使わないから忘れる。

作成例

<div class="wrap">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>

.wrap{
    counter-reset: number 0;
}
.inner::before{
    content: counter(number); 
    counter-increment: number 1; 
}

理解

counter-reset

カウンター名の宣言と初期値の指定。

一般的にbodyに書くけど連番対象の親だったらぶっちゃけどこにあっても動く。

counter()

連番の表示。

css上で挿入できる箇所はcontentしかないんで、疑似要素専用だと思っとけばとりあえず間違いはない。

counter-increment

対象となるカウンター名の指定と増加数の指定。

cssの書式に倣い先に書いた方から処理される。
なので、counter()の後に書いたら表示後に増加、counter()より手前に書いたら増加してから表示。はずなんだけど。

活用

例のとおりではあるけれど、リストじゃなくても使えるってのが重要。
定型的なルールで記述するときに手打ちする必要なく自動的に連番を振れるんだって覚えておく。

だから、<article>内の見出し<h2>に連番をつけるとか、その下層<h3>にも付けていくとか。
疑似要素のcontent自体には文字列を表示する以外の機能はないのでそこまで派手なことはできないけど、まあ、思いつけばいい感じにやっていける。