CSSで連番をつける方法

Web制作をしているなかで、こんな風に連番をつけたいときってないですか？

よく採用の流れ・業務の流れ等ででてくるかなと思います。
いままでは、普通にhtmlやcssに直接数字を書いていたんですが、CSSに便利なものがありました。

counter-incrementの使い方

今回使うcssのプロパティはcounter-incrementと言うものです。
まずは、htmlを準備します。今回は、リストを作成するのでulタグliタグを使用します

index.html

  <ul>
    <li>タイトル</li>
    <li>タイトル</li>
    <li>タイトル</li>
    <li>タイトル</li>
    <li>タイトル</li>
  </ul>

次に、連番をつけるために必要なCSSプロパティを付与します。

style.scss

ul{
  list-style: none;
  li{
    counter-increment: test;
    &::before{
      content: counter(test);
    }
  }
}

counter-increment:testは連番表示をさせるための繰り返しの要素にcontent:counter(test)は連番表示をさせたい要素のbefore要素に。
ここまででどのように表示されるかをみてみます。

See the Pen counter-increment練習1 by TakahiroOkada (@okalog) on CodePen.

では、さらにみやすくCSSを当てていきます。

See the Pen counter-increment完成 by TakahiroOkada (@okalog) on CodePen.

このように、数字を直接書かなくても連番表記ができるようになりました。
一桁の数字指定ぐらいであればめんどくさくないかもしれませんが、ちょっと便利なCSSですね。
わたしも、案件で使おうとしたんですが、結局画像でいいよーって話になったので使用はしませんでしが、覚えておくとどっかで役に立つかもしれません。