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

サンプルとコード

  1. first item
  2. second item
    1. second item first subitem
    2. second item second subitem
    3. second item third subitem
  3. third item
ol {
  counter-reset: li; 
  list-style: none; 
}

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

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