Números de lista ordenados de estilo

Ao estilizar listas, eu inevitavelmente removo os marcadores ou números padrão com CSS, usando algo como:

li {    
    list-style-type: none;
}

E acabam substituindo o marcador ou número por uma imagem de fundo. Isso funciona muito bem, até que você precise daqueles números incrementais de volta e não queira entrar na situação em que está codificando números fixamente e usando marcação extra para recriá-los.

No entanto, as opções de estilo para os marcadores e números padrão são limitadas para dizer o mínimo e todos nós queremos números bonitos, não é?

Então, eu encontrei uma ótima solução para isso hoje (por meio do Sr. Ashley Stevens ) usando pseudo seletores e as propriedades de conteúdo geradas por CSS pouco conhecidas:

content:counter; 
counter-increment; 

Essencialmente, você pode usar pseudoelementos com o estilo de sua preferência, mas ainda manter os números de incremento automático intactos.

Para uma ótima explicação completa de Roger Johansson, confira este artigo incrível: http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/