疑似要素と「counter」で自動ナンバリング

ポイント等を表現する時にナンバリングをしていますが、項目増えたり、並び替えた際に番号の振り直し忘れの無いよう、自動でナンバリングが行えるようにする方法をメモ

HTML

<ul class="pointlist">
<li>
<h4>だるまさんがころんだ</h4>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
</li>
<li>
<h4>だるまさんがころんだ</h4>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
</li>
・
・
・
<li>
<h4>だるまさんがころんだ</h4>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
</li>
</ul>

CSS

.pointlist{
	counter-reset: number 0; /* number というカウンタ名で 0 をセット */
}
.pointlist li::before{
	counter-increment: number 1; /* number の値を 1 づつ増加 */
	content: counter(number);
}

「countercounter-reset」はカウントする値をリセットするプロパティ。
ナンバリングをしたい要素の親要素に設定しカウンタ名(例：number)と初期値(例：0)を設定。
ナンバリング値は「counter」で出力。
カウントの増加数は「counter-increment」で設定。

• 欅BodyTherapistSchool