CSS：counter-incrementを使って要素に連番表示するときのサンプルコード

単純な連番表示

1 → 2 → 3 → 4 → 5 ... という単純な連番を表示する場合は、CSSを下記のように記述します。

CSS

section {
  counter-increment: section;
}
section::before {
  content: counter(section);
}

0スタートの連番表示

0 → 1 → 2 → 3 → 4 ... というようにスタートを0から始めたい場合は、CSSを下記のように記述します。
動きとしては:nth-of-type()を使ってひとつ目のsection要素にはcounter-resetを指定して0を表示させ、次に:nth-of-type()と:not()を組み合わせてひとつ目の要素でない（ふたつ目以降の要素）場合はcounter-incrementで値を進めています。

CSS

section:nth-of-type(1) {
  counter-reset: section;
}
section:not(:nth-of-type(1)) {
  counter-increment: section;
}
section::before {
  content: counter(section);
}

ゼロパディングな連番表示

01 → 02 → 03 → 04 → 05 ... のようなゼロパディング（ゼロ埋め）で連番を表示する場合は、counterの指定部分でdecimal-leading-zeroを使って実装でき、CSSを下記のように記述します。

CSS

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

0を複数にした場合の連番表示

上の応用的なもので、例えば 001 → 002 → 003 → 004 → 005 ... のように0をひとつではなく複数表示させたい場合は、CSSを下記のように記述します。

CSS

section {
  counter-increment: section;
}
section::before {
  content: '0' counter(section, decimal-leading-zero);
}
section:nth-of-type(99) ~ section::before {
  content: counter(section, decimal-leading-zero);
}

基本は「ゼロパディングな連番表示」のときと同じようにcontent記述しているcounter()でdecimal-leading-zeroを使用するのですが、そこへさらに頭に0を追加するように記述します。
こうすることで001や002といった表示にさせることが可能になります。

ただ、これだけだと100以降の表示が0100や0101のように余計な0が付いてしまうので、最後にその対策として頭に0を付けない形でcontentを再度指定します。
指定には間接セレクタを組み合わせており、section:nth-of-type(99) ~ sectionと指定することで100以降の場合のスタイルを指定できます。