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
::markerpseudo element to style list bullets & numbers - Use
display: list-itemto add a marker on any element - Use
counter-resetandcounter-incrementto create your own counters - Use
counter()andcounters()to control how counter numbers are displayed