CSSの「counter-increment」を使って要素に自動で連番を振る方法

CSSの「counter-increment」を使えば、”1→2→3…”というように要素に対して自動で連番を振ることができます。

このcounter-incrementの使い方について解説したいと思います。

CSSの「counter-increment」を使って要素に自動で連番を振るする方法

例えば、連続するsection要素に対して連番を振りたい時は、以下のように指定します。


section {
  counter-increment: num;
}

section::before {
  content: counter(num);
}

カウントしたい要素に対して、counter-incrementを指定します。そのうえで、「counter(num)」で連番を出力しています。

上記の場合、連続するsection要素に対して連番(1→2→3…)が追加されます。

counter-incrementで指定している”num”は任意の文字列に変更してもらって大丈夫です。その場合、「counter(num)」も文字列を揃えてください。

連番の数字を「01→02→03…」というように、最初に0を付けたい場合は、以下のように指定します。


section {
  counter-increment: num;
}

section::before {
  content: counter(num,decimal-leading-zero);
}

counterに「decimal-leading-zero」を追加することで、連番の先頭に0が付与されます。

さらに、数字の後ろに点などの記号や文字を追加したい場合は、以下のように指定します。


section {
  counter-increment: num;
}

section::before {
  content: counter(num) ".";
}

counter-incrementの使い方は非常に簡単ですね。::before属性などを使って、要素に自動で連番を振りたい時は、ぜひ試してみてください。