olタグのリスト番号をcounterプロパティを使ってCSSで装飾する

olタグのリストに、自動で付与される番号を装飾する方法をご紹介します。
この方法なら順番の入れ替えがあっても、柔軟に対応できるリストが作れます。

サンプル

主に使うプロパティ

counter-reset: カウンター名 番号の初期値; カウンター名と番号の初期値を指定します。
番号の初期値のデフォルトは０です。
content: counter(カウンター名) “カウンターに挿入する文字列”; カウンターの表示形式を指定します。カウンターの前後に 「””」で囲った文字列が表示されます。
counter-increment: カウンター名 増加させる値; カウンターを増加させる値を指定します。デフォトは1です。

CSS

CSSは以下のとおりです。(SCSSで書かれています)
before で番号の背景になるエリアを設定して、after でカウンターの設定を行っています。
また、入れ子の番号リストが存在した時にカウンターと装飾が影響しないよう、.numberクラスがついたol直下のliのみにカウンターを入れるようにしています。

.number {
  list-style: none;
  counter-reset: circle 0; /* カウンターの初期値を０にセット */
  margin:1em;
  padding:0 0 0 3em;
  & > li {
    position:relative;
    line-height:1.6;
    margin:0 0 1em;
  }
  & ol {
    margin:0.5em 0;
  }
  & > li:before {
    position: absolute;
    top: -3px;
    left:-3em;
    width:2em;
    height:2em;
    background:#0068b7;
    content:"";
    display:block;
    border-radius:50%;
    line-height:1;
  }
  & > li:after {
    content: counter(circle) "."; /* 表示形式を指定 */
    counter-increment: circle 1; /* カウンターの値を増加させる */
    display: block;
    color: #fff;
    position: absolute;
    top: 5px;
    left:-2.4em;
    line-height:1;
  }
}