1. ホーム
  2. css

順序付きリストの数字を太字にする方法はありますか?

2023-10-25 07:28:57

質問

順序付きリストの数字部分のみにスタイルを付けるためのCSSセレクタはありますか?

私は次のようなHTMLを持っています。

<ol>
   <li>a</li>
   <li>b</li>
   <li>c</li>
</ol>

というのが出力されるはずです。

1.a
2.b
3.c

1.と2.と3.を作りたいのですが。 太字 とし、a,b,cは通常のままとする。

私が意識しているのは <span> の回避策を...

どのように解決するのですか?

カウンターインクリメント

CSS

ol {
  margin: 0 0 1.5em;
  padding: 0;
  counter-reset: item;
}

ol > li {
  margin: 0;
  padding: 0 0 0 2em;
  text-indent: -2em;
  list-style-type: none;
  counter-increment: item;
}

ol > li:before {
  display: inline-block;
  width: 1em;
  padding-right: 0.5em;
  font-weight: bold;
  text-align: right;
  content: counter(item) ".";
}

デモ