ol タグの連番を装飾する

ol タグを使って連番表示したい時、デフォルトの設定ではテキストに指定した色で連番が出力されます。その連番に「色」や「装飾」を付けたいと思います。

連番を装飾してみる

ここでは、ライフハッカー風のランキング部分を作成したいと思います。

HTML は、 単純な順序付きリストを用意します。

<ol class="c-ranking-panel">
    <li class="c-ranking-summary">
        <div class="c-ranking-summary__title">Title1</div>
        <div class="c-ranking-summary__meta">2021/02/11</div>
    </li>
    <li class="c-ranking-summary">
        <div class="c-ranking-summary__title">Title2</div>
        <div class="c-ranking-summary__meta">2021/02/12</div>
    </li>
</ol>

連番を自前で振っていくため list-style を none に設定し、連番部分を疑似要素を使って作成します。

.c-ranking-panel {
  counter-reset: cnt;
}
.c-ranking-summary {
  position: relative;
  list-style: none;
  padding-left: 30px;
  margin-bottom: 1em;
}
.c-ranking-summary::before{
  position: absolute;
  top: 0;
  left: 0;
  padding-right: 5px;
  height: 100%;
  font-size: 1.5em;
  border-right: solid 1px #011729;
  counter-increment: cnt;
  content: counter(cnt);
}
.c-ranking-summary__meta {
  font-size: 0.75rem;
  color: #53627a;
}

疑似要素の位置を固定するため、親要素に position: relative; を設定し疑似要素には position: absolute; を指定します。親要素の list-style に none を設定することで連番を表示しないようにします。

自前で連番を振りたいので、 counter-reset プロパティでプロパティに指定したカウンター名（変数みたいなもの？）を 0 にリセットします。

次に「c-ranking-summary」を指定した要素が出現するたびにカウンターをインクリメントしたいので、 counter-increment プロパティを疑似要素に設定します。インクリメントするカウンターの名前は先ほどリセットした cnt を指定します。疑似要素に設定しているのは、親要素の前に連番を割り込ませて表示するためになります。

カウンターの表示は、 content プロパティを使って cnt の値を出力します。

その他の装飾は、必要に応じて設定することで完成します。