olの連番をcounter関数で表示

olの連番のピリオドを消す為、list-styleではなくcontent: counter()での表示にした。

CSS追加

licounter-increment: カウンタ名
li::beforecontent: counter(カウンタ名)を指定する。

ol li
	position: relative
	list-style-type: none
	counter-increment: cnt
	&::before
			position: absolute
			width: 1em
			height: 1em
			left: -1.4em
			text-align: center
			content: counter(cnt)

開始番号の指定

既存のstart属性値をattr()で取得してcounter-reset: cnt attr(start)で実現出来れば良かったが、attr関数は現状文字列としてしか使えない。

自分の要求は「前olの連番を継続」なので以下で解決した。

ol, ul
	counter-reset: cnt
ol[start]
	counter-reset: none
適用前
適用後


attrの型指定がサポートされればcounter-reset: cnt attr(start number, 0)で番号指定にも対応出来る。


参考