Styling Lists in CSS

When you create lists in HTML, browsers add bullet-points or numbers we call list markers. Now CSS gives us the tools to style those list markers, and even create our own!

Part of a series tagged 'mozilla developer'

Styling Lists in CSS – October 1, 2019
Why is CSS so Weird? – October 3, 2019
What does <code>revert</code> do in CSS? – October 9, 2019
Faster Layouts with CSS Grid – October 14, 2019
Subgrid for Better Card Layouts – October 15, 2019
Laying out Forms using Subgrid – October 16, 2019
Why isn’t this CSS doing anything? – October 21, 2019
Inner & Outer Values of the Display Property – October 28, 2019
Scroll Snap in CSS – October 31, 2019
How do you wrap long words in CSS? – November 6, 2019
Use new selectors responsibly with selector queries – November 20, 2019

I’ll also show you how the ::marker element is different from ::before or ::after. Watch the video, and go play with the demo on codepen.

Style list markers, and add your own counters!

Use the ::marker pseudo element to style list bullets & numbers
Use display: list-item to add a marker on any element
Use counter-reset and counter-increment to create your own counters
Use counter() and counters() to control how counter numbers are displayed