A CSS Generated Ordered List

You may already know that combining <ol> and <li> in HTML could generate an ordered list, but do you know you could generate a list with much more customisation with CSS counter plus before pseudo element?

Let’s open this pen first, after open it you will find 3 lists.

The first list is plain html ordered list using <ol> and <li> to generate.

Second list is a list using only <li> and without <ol> to generate, some of you may already know that without <ol>, all the <li> will be treated as unordered list item, so dots should actually appear instead of ordered number.

Third list is a list without any <ol> and <li> HTML code.

Second and third lists are used to demonstrate CSS counter could overwrite HTML <ol> and <li> setting.

So, let’s have a look of the second ordered list HTML code, you will find there is a class named as “css-counter” in side a div, and a few <li> inside that div. Normally these code will turn into an unordered list, but you can see that it does not.

If you want to know why, have a look of the CSS code and locate the .css-counter part. There is a ‘counter-reset’ style attribute being set to ‘km-counter’, which is telling the browser to use ‘km-counter’ as a reference of the number. And a list-style attribute is being set to none, which is used to hide the dots.

Then the some style is being set to .css-counter li:before. ‘counter-increment’ is used to tell the browser, every single increment of the item inside the same list should use ‘km-counter’ as reference. Lastly, inside content there is a ‘counter(km-counter)’ being set. It is used generate the number inside ‘km-counter’ current number.

In the third list, since there is absolutely no HTML <ul> and <li> code, so list-style is not even need to set to none.

So, you may already know what benefits CSS counter ordered list could provide to you, let me help to summarise a few;

1. Workable for non traditional HTML ordered lists.
2. You could style the font-size, color, padding, margin, border and many other style attributes.
3. When you get familiar with it, you may find some solution that is not possible to be appear in plain HTML ordered list code.

OK, you may play around with the pen and may even create another one by yourself with much more beautiful style (Yea, I know mine is kind of suck).

See you around next time!