Geradores de Conteúdo CSS

Fiquei fascinado com as propriedades geradoras de conteúdo do CSS. Visto que as folhas de estilo são essencialmente responsáveis por adicionar estilo a documentos escritos em uma linguagem de marcação, geradores de conteúdo é o que mais se assemelha à uma experiência de programação.
Utilizadas em conjunto com pseudo-elementos, essas propriedades permitem adiconar informações antes ou depois da apresentação de elementos. Se você não sabe o que são pseudo-elementos dê uma olhadinha antes no tópico Pseudo-Elementos CSS.

Content
A propriedade content é utilizada para a geração de conteúdo no momento da renderização. Os possíveis valores para content são:
inherit - herda o valor atribuido ao elemento-pai;
[string] - define uma string a ser incluída no documento;
[url] - define uma URL de um documento que será incluído;
counter([nome-contador]) - define um contador cujo valor será inserido no documento;
open/close-quote - insere aspas.

Se para o mesmo elemento for usado o valor open-quote para a propriedade content, tanto antes quanto após o elemento selecionado, irá aparecer primeiro aspas duplas e a seguir aspas simples. Além disso o close-quote só tem efeito se o valor open-quote já tiver sido atribuído antes.

Counter-increment
Usado para a numeração de sessões, é utilizada em conjuto com a propriedade counter. Os possíveis valores para counter-increment:
inherit - herda o valor atribuido ao elemento-pai;
none - não incrementa;
[contador] - nome do contador que será incrementado;
[número] - define quanto se deverá incrementar.

Counter-reset
Deve ser usado em conjunto com a propriedade counter e serve para zerar o contador. Os possíveis valores para counter-reset:
inherit - herda o valor atribuido ao elemento-pai;
none - não zera;
[contador] - nome do contador que será zerado;

Pronto, agora para testar estas três propriedades vamos escrever um documento HTML contendo vários parágrafos:

<p>Parágrafo</p>
<p>Parágrafo</p>
<p>Parágrafo</p>
<p>Parágrafo</p>

A seguir definimos as seguintes regras na filha de estilos deste documento:

body{counter-reset: cont;}
p:before{
counter-increment:cont 1;
content:counter(cont) " - ";
}
/* Primeiro o contador "cont" é zerado na sessão body. A cada parágrafo é incrementado com uma unidade o contador "cont" e esse valor é adicionado no início de cada parágrafo com a propriedade content. */

O resultado:

1 - Parágrafo
2 - Parágrafo
3 - Parágrafo
4 - Parágrafo

Ainda existe a propriedade quotes que define que tipo de aspas o documento utilizará.