I’ve always been annoyed by how difficult it is to style the numbers of ordered lists. Quite often a design calls for something other than just a plain figure – a different font, size, colour, background, whatever.
The traditional approach to solving this problem has been to prevent the browser from rendering the numbers of the list items (li elements) and instead hard code the numbers in the text content of the li. That makes it possible to add styling hooks to the number and style away until you’re happy.
Doing it that way works visually, but it isn’t exactly a semantically correct way of using lists. When you view a faked numbered list with CSS disabled you see either a list with the item numbers repeated or a list with bullets and numbers, and that feels backwards to me. I wanted to find a better way.
Posted in CSS.
Copyright © Roger Johansson