[CSS] 連番リスト（olタグ）の番号にスタイルを設定したい

公開日:2018/11/15 更新日:2019/12/23

やりたいこと

番号つきリストは便利ですが、くっついてくる連番がちょっと味気ないです
目立つリストが欲しいときに番号のスタイルを変えたいことがあります
そんなときはCSSのカウント機能を使いましょう。自動採番されてかつ自由にデザインできるリストを作ることができます

サンプルコード

html

<ol class="ex_order">
    <li>ファントムブラッド</li>
    <li>戦闘潮流</li>
    <li>スターダストクルセイダース</li>
</ol>

CSS

.ex_order {
    padding: 0px;
    margin: 0px;
    counter-reset: list_num;
    list-style: none;
}
.ex_order > li {
    position: relative;
    padding: 0px 0px 0px 3em;
    line-height: 2;
}
.ex_order > li:nth-of-type(n + 2) {
    margin-top: 1em;
}
.ex_order > li::before {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 2em;
    height: 2em;
    background-color: #3388dd;
    color: #fff;
    font-weight: bold;
    counter-increment: list_num;
    content: counter(list_num);
}

仕組み、解説、補足など

olタグの中で「counter-reset: list_num;」を実行してカウンターを初期化
カウンターを表示する擬似クラスの中で「counter-increment: list_num;」を実行してカウンターをインクリメントしつつ、「content: counter(list_num);」で番号を表示しています

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。