css counterを使ってみよ

最近よく使うcss counter。
olのリストやブロック要素の背景に番号を振る時に使いやすい。

使用例
https://yururi-nishiizu.com/facilities/

使い方はシンプルで、

• 親要素にcounter-reset: 変数 をセット
• 子要素content: counter(変数)で数値を表示
• 子要素counter-increment: 変数で数値を+1

.parent {
  counter-reset: val;
}
.child::before {
  counter-increment: val;
  content: counter(val);
}

インクリメント(+1)の挙動が色々述べられておるけど、極力ラップした親要素にcounter-resetをセットしておけば大体大丈夫。

ソースは例なのでbeforeを使わないといけないって訳ではない。

olだとわかりやすいかも。

ol {
  counter-reset: val;
}
ol li::before {
  counter-increment: val;
  content: counter(val);
}

ちなみに

content: ‘0’ counter(val);

と書くと使用例のように01,02,03…と表示できる。