Search code examples
csshtml-lists

Is there a way to make numbers in an ordered list bold?

Is there any CSS selector to attach some style to the numerical part of an ordered list only?

I have HTML like:

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

Which should output:

1.a
2.b
3.c

I need to make 1., 2. and 3. bold, while leaving a, b, and c regular.

I am aware of the <span> workaround...

Solution

  • A new ::marker pseudo-element selector has been added to CSS Pseudo-Elements Level 4, which makes styling list item numbers in bold as simple as

    ol > li::marker {
  font-weight: bold;
}

    It is currently supported by Firefox 68+, Chrome/Edge 86+, and Safari 11.1+.