CSS カウンターとかいう、知ってはいるけど一生使わないであろうと思ってた機能。
を、今日の仕事中に、まさにここという場面に出くわしたので使った。
具体的には、<ol> 要素による連番付き要素で、<li> 要素に内包するリストアイテムとして <section> を置く場合に、<section> 内の見出し要素に対して連番を付与したいというケースだ。
このケースでは、<ol> による標準の連番表記を適用すると、<section> 全体がリストアイテムになるため、その手前(::before) に連番が挿入されてしまう。
しかし実際は <section> 内にある見出し (h2 など) のテキストの手前に連番を挿入して欲しい。
こういうケースでCSSカウンターが使用できるなとなった。
ここはテックブログではないので、詳細なコードやデモの掲載はしないが、今まで何のためにある機能なんだろうと思っていた CSS カウンタにもこんな実用性があるんだなと感じることができた。
CSSカウンタに限らず、こういう使い所がよくわからないけど実は使えるみたいなの、色々あるんだろうなぁ。