Pseudo-Elementos CSS

Eu falei anteriormente de Pseudo-Classes CSS (se você não viu clique aqui), agora veremos os Pseudo-Elementos. Os pseudo-elementos permitem que elementos lógicos sejam definidos sem estarem necessariamente declarados na árvore de elementos do documento. A única limitação no uso de pseudo-elementos é no tocante a sua declaração em style-sheets locais.

São eles:

Before - Usado com a propriedade content para adicionar conteúdo antes de um elemento:

[elemento]:before { [bloco-de-declarações] }

Ex: a:before { content: "Teste"; }
/* Adiciona a strig "Teste" antes das ocorrências do elemento a */

After - Usado com a propriedade content para adicionar conteúdo após um elemento:

[elemento]:after { [bloco-de-declarações] }

Ex: a:after { content: "Teste"; }
/* Adiciona a strig "Teste" depois das ocorrências do elemento a */

First-letter - Permite aplicar propriedades ao primeiro caractere do texto de um elemento:

[elemento]:first-letter { [bloco-de-declarações] }

Ex: p:first-letter { font-weight:bold; }
/* Coloca a primeira letra de todo parágrafo em negrito */

First-line - Permite aplicar propriedades aos caracteres da primeira linha do texto de um elemento:

[elemento]:first-line { [bloco-de-declarações] }

Ex: p:first-line { font-weight:bold; }
/* Coloca a primeira linha de todo parágrafo em negrito */