How to Code Custom Numbered & Bulleted Lists

Graphic. Illustration of multi-colored custom numbered and bulleted lists.
Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

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.

Firstly, set list-style-type: none;.

Then, populate ol li:before with the numbers, content: counter(step-counter);.

Similarly, populate 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!

Here’s another version I created for the SPC Turkey Trot website prototype [Case Study here]: