Sad but truth not everything in HTML can be customized with standard CSS. Sometimes we have to use tricky ways to get closer to some elements. On of these elements is ordered list .

Let’s say that we need to change the appearance of numbers in ordered list. But there is no way we can do it directly. Of course we can just set and then put numbers in spans for each , but as for me this method is not very beautiful, since a good web developer doesn’t want to use extra HTML code when it’s possible to solve a problem with CSS.

Here is a better method:

And here is the result:

  1. Windows
  2. Linux
  3. Mac OS
  4. iOS
  5. Android OS
  6. BSD

As we can see the problem is solved without using extra HTML. Instead, we’ve used the CSS pseudo-element that creates additional content before a particular tag. Then we have created a counter that creates numbers that we use as content for our pseudo-element . And what is the most beautiful is that we can set any styles for our created ordered list numbers. We can even add some hover effects.

Let’s try it:

  1. Windows
  2. Linux
  3. Mac OS
  4. iOS
  5. Android OS
  6. BSD

Now the appearance of our numbers changes when we hover ol items. I’m sorry for my design skills, this green color looks strange. But all I wanted is to demonstrate you how it works. Anyway, thank you for your attention, I hope this article was useful for you. Good luck and come back for new posts. Bye.