数字付きリスト

See the Pen 数字付きリスト by keiichisawai (@sawakei) on CodePen.

1.カウンターを初期化

body{
  counter-reset:list-counter;
}

ブラウザによっては、初期化しなくても1から始まるように動く場合もあるが、意図しない動作にならないために初期化はする。

2.カウントを進める

.list-item{
  counter-increment:list-counter;
}

番号を増やしたい要素に記述します。

3.カウントを表示する

.list-item::before{
  content:counter(list-counter);
}

実際に数字を表示させたい場所に書きます。

4.「1」ではなく「01.」とつける

.list-item::before{
  content:"0" counter(list-counter) ".";
}

5.「010.」ではなく「10.」

.list-item:nth-child(9) ~ .list-item::before {
  content: counter(list-counter) ".";
}

• .list-item:nth-child(9)
  .list-itemの9番目を指定。
• ~ .item02
  その9番目より後にある兄弟の .item02 要素を対象にする。