CSSだけで数値をカウントし表示する

サンプルはこちら。

See the Pen counter-increment test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

HTMLにもCSSにも数値は書いておらず、連番リスト（ol）も使っていません。

変数をカウントする

h2 {
  counter-increment: x;
  counter-reset: y;
}
h3 {
  counter-increment: y;
}

h2,h3 の見出しにcounter-incrementというプロパティを使っています。

このプロパティはCSS内で変数を定義すると同時に、その変数を+1します。 上記の場合は h2 ごとにxが、h3ごとにyが1つ増える宣言をしています。

また h2 にはcounter-reset: yも宣言しています。これは指定した変数を0に戻すプロパティです。 h3 ごとに増えるyをリセットすることで大見出し(h2)ごとに小見出し(h3)の番号を1からやり直す形になります。

ちなみにcounter-increment: x y;という形で複数の変数を同時にカウントすることもできます。

変数を表示する

h2:before {
  content: "Part" counter(x) " : ";
}
h3:before {
  content: counter(x) "-" counter(y) " : ";
}

変数の表示ですが、現在counter-incrementで作った変数は疑似要素:beforeか:afterの、contentでしか表示されません。

疑似要素にcontent: counter(x)で変数を表示することができますが、サンプルのように前後に文字を入れたり、複数の変数も表示できます。

「X章Y条」のように長い条項が続く文章も番号を意識せず作れますし、ほかにも連番が必要な時にプログラムに頼らず表示することができます。