CSSで連番を表示するcounter-incrementを試してみた

See the Pen CSSのcounter-incrementを試してみた by takapen (@takapen) on CodePen.

counter-incrementにsample01など適当な文字列を入れ、それをcontentに出す。



以下、なんとなくいじってわかったこと。
- bbbのとこみたいにdivで囲っても続いてカウントアップされていく。
- 間にdivとかspanがあっても影響しない。
- 親としてdivとかsectionで囲うとその範囲内でカウントアップ。
- counter-resetを間に入れるとリセットできる。




html

aaaa
bbb
  
div
  span
ccc




ddd
eee


fff
ggg



h2
hhh
iii
h2
jjj
kkk

css

.num01 {counter-increment:sample01;}
.num01:before {
  content:"第"counter(sample01)"位";
}

.num02 {counter-increment:sample02;}
.num02:before {
  content:counter(sample02);
}
h2 {
  counter-reset:sample02;
}