May 5th, 2020
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.
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
reversed attribute will do the trick.
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.
Hand-Picked “Random” Order
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
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.
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)
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.
The original post List Style Recipes.