CSS allows webmasters to style text nearly any way they wish—then there’s lists. Lists can be stubborn. For instance, the web browser-generated numbers can look plain or even mismatching. Yet although adding custom styles to the numbers preceding a list item in an ordered list isn’t straightforward, it isn’t difficult either! With a few CSS tweaks and the use of the
:before psuedo-selector, customize the numbers any way desired. On the other hand, customize the bullets in an unordered list by switching out the bullets for Unicode symbols.
Overall, custom list styling has several uses:
- Use a different colored bullet or number from the rest of the body copy text
- Highlight the bullet or number with background colors or borders
- Give double-digit numbers more margin to keep the body copy text aligned with the text of lower numbers
The first step to creating both kinds of lists involves removing the default styles.
ol li:before with the numbers,
ul li:before with Unicode symbols. For example,
content: "●"; or
content: "▶"; or
content: "❧";. The trick here is to copy-paste the symbol directly into the CSS style. Entering the HTML entity or Unicode entity number produces unreliable results. For a handy reference of Unicode symbols, check out Unicode Character Table.
View the JSFiddle below for all the HTML and CSS code!