CSSだけで連番を作る

実は最近cssだけで連番を作ることができることを知りました。ずっとjsで書いていた自分が恥ずかしいです。

See the Pen 180302 by nekuta (@nekuta) on CodePen.

使うのはcounter-incrementというプロパティ。
連番表示させる繰り返し要素(今回はli)にcounter-incrementをつけ、連番を表示させたい要素(今回はli:before)にcontent:counter(ranking)をつけています。counter()が入る前後に任意の文字を入れることができます。また、プロパティ値を指定することで数字の出力を変えることができます。

参考サイト

スタイルシートリファレンス counter-increment
http://www.htmq.com/style/counter-increment.shtml

【CSS】counterを利用した自動ナンバリング
http://design-studio-f.com/blog/css-counter-automatic-numbering/