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.
CodePen Embed Fallback
The Break in the Middle
Ordered lists can start at any number you want them to.
CodePen Embed Fallback
The Nested Decimals
CodePen Embed Fallback
The Reversed Top 10 List
A single reversed attribute will do the trick.
CodePen Embed Fallback
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.
CodePen Embed Fallback
Emoji Bullets
CodePen Embed Fallback
Hand-Picked “Random” Order
The value attribute will set a list item to use the marker relevant for that position.
CodePen Embed Fallback
Custom Text Counters
Can be done with pseudo-elements for the most control, but there is also list-style-type: -;
CodePen Embed Fallback
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.
CodePen Embed Fallback
Colored Bullets
Three ways here:
::marker (newest and easiest)Classic pseudo-element stylebackground-image (this one is an SVG Data URL so you can manipulate the color from the CSS)
CodePen Embed Fallback
Columized List
The number of columns can be automatic.
CodePen Embed Fallback
Colored Circle Numbers
CodePen Embed Fallback
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.
CodePen Embed Fallback