
Styling Lists in CSS
Powerful New CSS for Styling Bullets, Numbers, and List Markers
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.
- Use the
::marker
pseudo element to style list bullets & numbers - Use
display: list-item
to add a marker on any element - Use
counter-reset
andcounter-increment
to create your own counters - Use
counter()
andcounters()
to control how counter numbers are displayed