Bold numbers in ordered lists
Numbers in an ordered list made bold without having any extra HTML tags added:
- List item
- List item
- List item
HTML code:
<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
CSS code:
ol {counter-reset: item;}
ol li {display: block;}
ol li:before {content: counter(item) ". "; counter-increment: item; font-weight: bold;}
There is no obvious way at the moment to style only numbers marking ordered list items. A workaround is to use a CSS counter instead of the default automatic numbering of ordered lists. The way a CSS counter is started allows to style specifically the marking numbers. Like in the example, where numbers in an ordered list are styled bold.
This method also lets to use other characters after the numbers - besides dots. Like a parenthesis / round bracket instead of a dot. Or handling of space between the number, punctuation mark and the content proper of list item.
Browser support
- Windows
- Internet Explorer 8.0+
- Firefox 1.5+
- Google Chrome
- Opera 4.0+
- Safari 3.1+
- SeaMonkey 1.0+
- Netscape 9.0+
- Linux
- Firefox 1.5+
- Google Chrome / Chromium
- Opera 5.0+
- SeaMonkey 1.0+
- Hv3
- Netscape 9.0+