March 21, 2015
Unordered lists are one of my favorite elements in the tool chest. You can do so much with them. They are versatile and really easy to style.
There are a ton of ways to style a list but I found a few new ones that could have some exciting use cases that I haven’t been using.
Mozilla has a great write about it https://hacks.mozilla.org/2015/02/introducing-counter-styles/.
Currently this only live in Firefox but you can use symbols and images. There is a great demo here https://mdn.github.io/css-counter-style-demo/ as well so you can play with different options for list-style.
counter-reset and counter-increment have been around and have great support. I think in just playing around with some demos. It showcased more the power of the pseudo elements. I usually don’t stop and take the time to analyze these selectors and how they could work into projects.
Written by John Siwicki who lives and works building interesting things. You should follow him on Twitter