※以下で紹介するものは、いずれもsection
要素が複数並んでいるのに対して連番を振り、数字は::before
擬似要素を使って表示する想定になります。
単純な連番表示
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以降の場合のスタイルを指定できます。
上で紹介したコードを用いた実際の表示は下記デモで確認できます。