Styling Lists in CSS

Powerful New CSS for Styling Bullets, Numbers, and List Markers

by Miriam Suzanne at Mozilla Developer on October 1, 2019

Video
AboutWeb Video
CSS
Mozilla Developer Channel

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!

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