menu
書いてる野郎
orebike@gmail.com
ol を使ったときの番号の修飾をやりたい場合があるが、そのときはこのようにする。
.hoge > ol{ margin-left: calc(40px + 3em); } .hoge > ol > li{ list-style-type: none; counter-increment: cnt; position: relative; } .hoge > ol > li::before{ display: block; content: "(" counter(cnt) ")"; position: absolute; left: -3em; width: 3em; text-align: center; }
list-style-type を解除して、デフォルトの番号が出ないようにする。
counter-increment でカウンタの変数的なやつを用意する。
次に疑似要素で要素の前に数字を仕込む。しかしそれに括弧を付与して出す。
疑似要素をブロックにし、センタリングにする。幅を3文字分とる。そして絶対位置指定で文字数分ブロックの外側に押しやる。 これで数字部分の下に要素が回り込まなくなる。
外に飛び出たので全体の左マージンを3文字分増やしている。