Stylish Ordered List

• 37762
• 12
• 0

Stylish Ordered list in pure CSS3. The main trick here is the styling of those numbers and the key is using CSS generated content to create and insert the counter numbers after removing the default numbering from the list.

The key parts are the following:

• list-style:none: disables the default numbering.
• counter-reset and counter-increment: create a counting scope and increment the count. Both are described in the CSS 2.1 12.4 Automatic counters and numbering. 
• content: inserts the index of the created counter. Described in CSS 2.1 12.2 The ‘content’ property .
• The :before pseudo-element.

I got the idea of styling ordered list from here. Feel free to play with the code below as much as you want and do whatever you want with it :)

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room