数字を連番で自動出力できるcounter-incrementプロパティ

文頭に数字を連番で自動出力してくれるcounter-incrementというプロパティを紹介します。
使い方ですが、まず親となるセレクタに
counter-reset: number;
を付与します。
※こちらの「number」の名前は何でも構いません。

そして、子要素の疑似要素に
counter-increment: number;
content: counter(number)”位”;
を付与すると下記のように出力されます。

1位リンゴ
2位バナナ
3位イチゴ

HTML
<p>すきな果物ランキング</p>
<div class=”count-box”>
<div>リンゴ</div>
<div>バナナ</div>
<div>イチゴ</div>
</div>

CSS
.count-box {
counter-reset: number;
}

.count-box div:before {
counter-increment: number;
content: counter(number)”位”;
padding-right: 5px;
}

個人的にはリストや見出しなどの数が増えたときにでも自動で連番されるので「入力する手間が省けて楽だな」と思ってます。