[CSS] olの数字だけを太字に装飾する方法

概要

<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を利用する方法しかなかった。