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:
::marker
(newest and easiest)- Classic pseudo-element style
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.