Usually, to output a numbered list , we use ol. In this case by default , we dont have any semantic way to customize the look of the numbers.
Roger Johansson provided an excellent solution for this problem. A demo page is also provided.
- Default numbering is disabled (list-style:none)
- Numbers are initiated using counter-reset:li property,
- The list counter is put as a the content using :before pseudo-element
- The counter is incremented by 1 using counter-increment:1
Note: IE7 does not support content property. People having IE8 or greater will enjoy the stylish look, otherwise default numbering style is displayed.
Advertisement
