ol、liを用いた番号リストがあります。これの番号部のみを好きに作る方法に:beforeの疑似要素を用いるものがあります。
これは
ol.only-before {
list-style-type: none;
}
の様に元々の番号を消し、
ol.has-before {
counter-reset:num;
}
ol.has-before li:before {
counter-increment: num;
content: counter(num);
background: cyan;
border-radius: 50%;
display: inline-block;
height: 1em;
width: 1em;
text-align: center;
}
の様にcounter-reset, counter-increment, contentで番号を制御、表示し、background以下で好きなように修飾する方法です。
このように好きに番号リストの番号部のデザインを作れますが、面倒な部分もあります。それは疑似要素はDOMでないためJavaScriptで操りにくい点とli要素の度のcounter-increment: num;でしか値を増やせない点です。
本来の番号リストは次の様にli要素の属性valueで番号を制御できます。:beforeの方は制御できていません。
制御する方法の一つはCSSです。適宜リセットするstyleを定義します。この方法はCSSが膨れ上がるという問題点がありますが、一応対処が可能です。
適宜インクリメント、デクリメントするのみの要素を定義する、ということもできます。これはこれでHTMLの要素数が無駄に増えます。また、抜け版を表すのには適していますが、任意に操りやすいとは言い難いです。
両方を使えばそれぞれの欠点は多少補いあえます。
もしデザインに最初から関われるのであれば、CSSで閉じている疑似要素を使うのでなく、本物の要素を扱った番号リストを作った方がよいでしょう。その方が後の変更が楽になります。Vue.jsなら簡単です。
