counter-incrementプロパティを使ってcssだけで連番をつける

表の見出しを順序付きリストっぽく連番を振りたかったので、counter-incrementプロパティを使ってcssだけで連番をつけた。

See the Pen WvopgL by Hiroaki Takeuchi (@eturlt) on CodePen.

counter-increment: Num;

でNumが指定した数字をひとつ進める。

content: counter(Num);

で表示する。
具体的にはcssを参照。

counter-reset: Num;

で数字をリセットする

注意

たとえ数字をリセットしたくなくても、

counter-reset: Num;

の記述がどこかにないと全部1とかになっちゃう。