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

Question

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...

Answer 1

Counter-increment

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) "."; } 

DEMO

Answer 2

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+.