概要

<ol>(順序付きリスト)は、、list-style-typeプロパティを使用してスタイル付けする事ができる。ただ、数字や記号を変更する事は出来るが、任意の形だったりテキストのデコレーションを変更することはできない。
これを解決したい。

デモ

実装

ol {
  counter-reset: list-count; 
  list-style: none; 
}

ol > li::before {
  content:counter(list-count) ".";
  counter-increment: list-count;
}
  • 従来の数字はlist-style:noneで消す
  • counter-incrementで数字を付ける
    追加した数字を装飾する

まとめ

構造を崩さず、CSSだけで太字にするには、疑似要素とcounter-incrementを利用する方法しかなかった。