【HTML+CSS】counter-incrementを使って

リストの番号だけCSSで装飾する方法

counter-incrementを使って<ol>リストの番号だけCSSで装飾する方法

HTML

<ol class="vaList">
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>

HTMLのコードは通常通り「olタグ」で囲って「liタグ」でリストアイテムを囲います。

CSS

      .vaList {
        margin-bottom: 1em;
        counter-reset: item;

        li:before {
          counter-increment: item;
          content: counter(item)".";
          /* 以下は自由に装飾... */
          padding-right: .5em;
          font-size: 26px;
          font-weight: bold;
          color: #b81649;

          @include g.sp {
            font-size: 0.8125rem;
          }
        }
      }

olのリストスタイルのリセットをしていなければ下記のコードを追加して下さい。

ol{
  list-style-type: none;
}

cunter-reset

「cunter-reset」はカウンタをリセットするプロパティで、これを記述してないとうまく動作しないことがあるので記述しましょう。

今回の場合は「olタグ」のクラス名に記述。

counter-reset: item;

プロパティの「item」の部分は変数なので、好きな名前でOK。

もし「１」からではなく、「３」から番号を始めたいときは

counter-reset: item 2;

と記述すれば、番号は３から始まります。

counter-increment

「counter-increment」はカウンタの値を増やしていくプロパティ。

これは「li」の擬似要素「li:before」に記述。

counter-increment: item;

番号のカウントを２ずつ増やしたいときは

counter-increment: item 2;

と記述すれば２→４→６と番号が表示されるようになります。

content

擬似要素なので「content」は下記のように記述。

content: counter(item);

今回は番号に「.（ドット）」をつけるデザインだったので、

content: counter(item)".";

のように記述すればOK。