List Style Recipes

Lists are a fundamental part of HTML! They are useful in things like blog posts for listing out steps, recipes for listing ingredients, or items in a navigation menu. Not only are they an opportunity for styling, but they have accessibility implications. For example, the number of items in a list is announced in a screen reader to give some context to the list.

Let’s focus on styling lists here, mostly just ordered and unordered lists (with apologies for snubbing our friend the definition list), and somewhat unusual styling situations.

The Basics

Before you do anything too fancy, know that there is quite few settings for list-style-type that might cover your needs out of the gate.

The Break in the Middle

Ordered lists can start at any number you want them to.

The Nested Decimals

The Reversed Top 10 List

A single reversed attribute will do the trick.

Image Bullets

The best bet is using a background-image on a pseudo-element. You’d think list-style-image would be the way to go, but it’s extremely limited. For example, you can’t position it or even resize it.

Emoji Bullets

Hand-Picked “Random” Order

The value attribute will set a list item to use the marker relevant for that position.

Custom Text Counters

Can be done with pseudo-elements for the most control, but there is also list-style-type: '-';

Inside vs. Outside

Things line up nicer with list-style-position: outside; (the default value), but the list markers render outside the box, so you have to be careful not to cut them off. They could hang off the edge of the browser window, or overflow: hidden; will hide them completely. The last two examples here have a trick to mimic the nicer alignment while rendering inside the element.

Colored Bullets

Three ways here:

1. ::marker (newest and easiest)
2. Classic pseudo-element style
3. background-image (this one is an SVG Data URL so you can manipulate the color from the CSS)

Columized List

The number of columns can be automatic.

Colored Circle Numbers

Custom Cycling List Symbols

One-offs can be done with list-style: symbols() and reusable sets can be made with @counter-style then used. Note this is only supported in Firefox at the time of writing.