What: You have an unordered list and you want to turn it into an ordered one through CSS
How: You can do this with CSS 2.1 and the counter element. Yay! I love CSS.
#koko-analytics-most-viewed-posts-2 ul {
list-style: none;
counter-reset: li;
}
#koko-analytics-most-viewed-posts-2 li::before {
content: counter(li);
counter-increment: li;
}Why: I can image you’re wondering WHY?! Just use an ordered list!!! Yes, I know, I agree, however…sometimes you can’t. Koko Analytics, a privacy-conscious WordPress plugin that does simple site analytics extremely well and I love this sweet plugin for it, now has a wonderful widget that lets you show your most popular posts.
The HTML for it, like with any widget, is generated for me and it’s giving me an ul to work with. I have no control over that (well… I do, but you know what I mean) but I can easily add some CSS in the customizer. And I think a top 5 of anything is a good moment to turn an ul into an ol. So I did.
Where: There is a good and clear article by Roger Johansson on the adjacent topic Styling ordered list numbers
Thoughts: As said before, this is not how I would usually make an ordered list, of course! This post is just a good excuse to celebrate the existence of the CSS counter because it is awesome and you can use it for fabulous things like numbered chapters, numbered steps in a form, numbered anything!