- 数字を手打ちするのが面倒
- 内容が変更になって、数字を振り直すのが大変
- 採番ミスを防ぎたい
こんな時にとて便利なコードです！
まずは見本コード
See the Pen css auto numbering by yurippe-i (@yurippe-i) on CodePen.
【解説】counter-increment
counter-increment は、値を増加・減少させるためのプロパティ。
採番したいセレクタ（今回であれば.item）にcounter-incrementを付けます。
値は好きな名前を付けてOK。
CSS
.item {
/* num の部分は好きな名前を付ける */
counter-increment: num;
}要素の前に番号を付けるために、疑似要素::beforeを使って、先ほど付けた名前のカウンターを呼び出します。
CSS
.item::before {
/* カウンターを呼び出し */
content: counter(num);
}数字の前にゼロを付けたい＆前後に文字を置きたいとき
CSSであらかじめ用意されているdecimal-leading-zeroで実現できます。
数字の前後に文字やピリオドを付けたい場合は、""で囲んで書きましょう。
CSS
.item::before {
content: "vol "counter(num,decimal-leading-zero)".";
}