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.
::marker pseudo element to style list bullets & numbersdisplay: list-item to add a marker on any elementcounter-reset and counter-increment to create your own counterscounter() and counters() to control how counter numbers are displayed
Brad chats with Miriam Suzanne about pottery, theater, CSS, and why we shouldn’t just accept AI as the way. Miriam describes their through-line as collaborative creativity across pottery, theater, client work, and CSS standards, arguing process shapes results and that CSS is inherently collaborative with users, browsers, and devices.
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.
I joined Geoff Graham for a Smashing live stream to talk about CSS, web standards, music, and more!