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 Freelance Web Developer from Belgium. 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.