Styling Ordered Lists with CSS Counters

Using CSS Counters, Josh W Comeau injects his own number in ordered lists. That way he can style the number itself separately.

ol li {
  counter-increment: muffins;

ol li:before {
  content: counter(muffins) ". ";
  color: hotpink;

ol {
  list-style: none;
  counter-reset: muffins;

Apart from styling, I find this technique come in handy to assign the sequence numbers to an element contained somewhere inside the <li>

See the Pen CSS Counter by Bramus (@bramus) on CodePen.

Something that was new to me in his article was the counters (not counter) function, to play nice with nested ordered lists.

Styling Ordered Lists with CSS Counters →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.