Is there a way to make numbers in an ordered list bold?
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+.
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