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 →