CSS/順序リストで括弧付き番号を使う

CSS/順序リストで括弧付き番号を使う

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文字分増やしている。

Tags

css/howto/use_bracket_number_order_list.txt · 最終更新: 2019-12-03 10:46 by ore