意外と知られていない CSSで番号出力
| HTML/CSS/PHPリストとかで頭に数字を付けたりすることがあるとおもうんです
- こんな感じ
- 順番に出す場合
- olつかったりして番号だしたり
- してますよねー
- もしくはsassとかでfor文つかったり
こんな感じで使えますよね。
cssだけで、olとかulとかじゃなくてもできるようになります。
こんな感じで使えます。
僕がよく使う方法としては
// sectionという名前でカウンターを設定しますっていう宣言 0を設定します。
body{
counter-reset: section;
}
// counter-incrementでsectionのカウントを+1します。
// counter(section)で出力
h3{
counter-increment: section;
&::before {
content: counter(section);
}
}
結構簡単に設定できます。
CSS結構長い間使ってますが、こんなのがあったなんてつい最近まで知りませんでした。
知っていれば結構便利ですよね。