Styling ordered and unordered lists
Lists are a fundamental part of HTML, used for steps in a blog post, ingredients in a recipe, or items in a navigation menu. They carry accessibility implications too: screen readers announce how many items a list contains, giving the listener context. What follows focuses on styling ordered and unordered lists in somewhat unusual situations, with apologies to the definition list.
Start with the built-ins
Before reaching for anything fancy, note that list-style-type ships with quite a few settings that may cover your needs out of the gate.
Numbers, order and sequence
Ordered lists can start at any number you want, and a single reversed attribute produces a reversed top-ten list.
For ordering that skips the natural sequence, the value attribute sets a list item to use the marker relevant for that position — useful for a hand-picked "random" order.
Markers: images, emoji and text
Image bullets are best done with a background-image on a pseudo-element. list-style-image looks like the obvious tool, but it is extremely limited: you cannot position it, or even resize it.
Custom text counters can be handled with pseudo-elements for the most control, or with list-style-type: '-';.
Extending marker behavior
One-off marker symbols can be defined with list-style: symbols(), while reusable sets are built with @counter-style and then used. At the time of writing this is only supported in Firefox.
Positioning and alignment
Things line up nicer with list-style-position: outside;, which is the default. The tradeoff is that markers render outside the box, so they can be clipped: they may hang off the edge of the browser window, or overflow: hidden; can hide them entirely. One way around this is to mimic the nicer alignment of outside while still rendering inside the element.
Color
Colored bullets come in three varieties:
::marker, the newest and easiest- The classic pseudo-element approach
background-image, using an SVG Data URL so the color can be manipulated from the CSS
Colored circle numbers are another option.
Layout
Lists can be laid out in columns, and the number of columns can be automatic.
