Siwicki

Lists Sweet Lists

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.

@counter-style

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.

Counters

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.


John SiwickiWritten by John Siwicki who lives and works building interesting things. You should follow him on Twitter