Stylish Ordered List
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-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 .
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 :)