【CSS】CSSで連番を振るcounter-incrementプロパティ

CSSだけで要素に連番を振ることができるってことで試した時の備忘録

要素に連番を振ることができるcounter-incrementプロパティ

疑似要素::before::afterに指定をして使う

<style>
ul{
	counter-reset: test 0;/* 0から連番をスタート */
}
li::before{
	counter-increment: test 1;/* 1づつ増やす */
	content: "0" counter(test) ".";/* 連番の挿入 */
}
</style>
<ul>
	<li>テキスト</li><!-- 01.テキスト -->
	<li>テキスト</li><!-- 02.テキスト -->
	<li>テキスト</li><!-- 03.テキスト -->
</ul>

counter(test)の前後にテキストを挿入することができる

注意点でcounter-resetプロパティを設定していないと連番が上手く振れなかったりした

counter-resetプロパティを使って応用する方法

counter-resetプロパティを使って途中から連番の数値を変更することが可能

<style>
ul{
	counter-reset: test 0;/* 0から連番をスタート */
}
li::before{
	counter-increment: test 1;/* 1づつ増やす */
	content: "0" counter(test) ".";/* 連番の挿入 */
}
/* 追加 */
li.reset{
	counter-reset:test 6;/* 6から連番を再スタート */
}
</style>
<ul>
	<li>テキスト</li><!-- 01.テキスト -->
	<li>テキスト</li><!-- 02.テキスト -->
	<li>テキスト</li><!-- 03.テキスト -->
	<li class="reset">テキスト</li><!-- 07.テキスト -->
	<li>テキスト</li><!-- 08.テキスト -->
	<li>テキスト</li><!-- 09.テキスト -->
</ul>