Styling ordered list numbers

When styling lists I inevitably remove the default bullet points or numbers with CSS, using something like:

li {    
    list-style-type: none;
}

And end up replacing the bullet or number with a background image. This works great, until you need those incrementing numbers back and don't want to get into the situation where you are hard coding numbers and using extra mark up to re-create them.

However the styling options for the default bullets and numbers are limited to say the least and we all want pretty numbers, don't we.

So, I found a great solution for this today (via Mr Ashley Stevens) using pseudo selectors and the little known CSS generated content properties:

content:counter; 
counter-increment; 

Essentially you can use pseudo elements styled just as you like them but still keep auto incrementing numbers intact.

For a great full explanation from Roger Johansson check out this awesome article: http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/