【CSS】「counter-increment」使い方メモ／番号を付ける

counter-increment とは

複数ある要素に番号を付けたいときに使用します。

疑似要素に「content: counter();」も指定します。

文章の先頭に数字を入れたいとき、

 li {
      counter-increment: number;
    }
    li::before {
      content: counter(number);
    }

増加する値を指定したいときは、「counter-increment: number 5;」（5ずつ追加）と入力します。

li {
  list-style: none;
  counter-increment : chapter;
}
li:before {
  content : "第" counter(chapter) "問";
  padding-right: 10px;
}

親要素に「counter-reset」を指定して、カウンターをリセットします。

リセットしない場合は、表示されなかったり、意図しない所に自動的に数字出てきてしまう可能性がある。

所定の場所でリセットする方法もあります。
　（「counter-reset: inner;」など）

li {
 counter-reset: number 0; /* 名前は任意、0でリセット。*/
}
li::before {
 counter-increment: number 1;
}