Styling Lists in CSS

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

on Mozilla Developer with Miriam Suzanne on October 1, 2019

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

Recent Videos

Video post type

How to Use CSS Anchor Positioning TODAY

on Learn With Jason with James Stuckey Weber on Mar 6

CSS anchor positioning simplifies popovers and dropdowns, and also unlocks new creative possibilities. James joined Jason to teach and explore anchor positioning in live code.

see all Video posts
Video post type

Smashing Hour with Miriam Suzanne

on Smashing Hour with Miriam Suzanne on Jun 20

I joined Geoff Graham for a Smashing live stream to talk about CSS, web standards, music, and more!

see all Video posts
Video post type

Web Development Is Theater

on Work Item Podcast with Miriam Suzanne on Jun 12

I joined Den Delimarsky on the Work Item podcast to talk about my path as a developer – from building a website for my theater company, to building a career and a company around it. In this show, we talk about the power of the web, and how CSS is…

see all Video posts