liタグでよく使う1とか2とかをcssで連番に表示させる

リストタグ<li>をコーディングするときによくあるのが

1. 番号付きリスト
2. 番号付きリスト
3. 番号付きリスト

とか上のような番号付きのリスト。

原稿のコピペでなんとなく直接書いてたのですが調べたらcssで自動的に番号を振ってくれるんですね〜
早速使ってみました

HTML

<ol class="list_number">
  <li>
    <p>テスト見出し<br>ダミー文章</p>
    <p>ぶんは外のおじぎ間会がねずみを教わっみみずくたた。またどう変ましですというゴーシュませなく。</p>
  </li>
  <li>
    <p>テスト見出し<br>ダミー文章</p>
    <p>いいかげんたなのましはでしそしてゴーシュのばか汁の中からはにわかに生意気ましでして、</p>
  </li>
  <li>
    <p>テスト見出し<br>ダミー文章</p>
    <p>これじゃ火花を落ちれものないた。</p>
  </li>
</ol>

css

.list_number {
  counter-reset: number;
  list-style-type: none;
  padding: 0 16px;
}
.list_number li {
  position: relative;
  border-top: 1px dashed #5fbcff;
  margin-top: 0;
  line-height: 1.2;
  padding: 16px 0 16px 53px;
}
.list_number li p {
  margin: 0;
}
.list_number li:before {
  position: absolute;
  top: 25px;
  left: 0;
  counter-increment: number;
  content: counter(number);
  display: inline-block;
  background: #5fbcff;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
}

コレが肝

counter-increment

連番で表示させるためにcounter-increment: カウンタ名（自由に決めてOK）;
表示形式を指定（今回は数字の連番）content: counter(number);

出来上がり

See the Pen cssで連番を表示させる by naoko kikuchi (@kikuchi) on CodePen.

参考サイト

【CSS】counterを利用した自動ナンバリング

自動で連番付与できるCSS。counter-incrementの使い方