CSS Pseudo-elements

Pseudo-elementos são usados em CSS para adicionar efeitos diferentes em alguns seletores, ou parte de alguns seletores.

Exemplos

Torne a primeira letra especial
Este exemplo demonstra como adicionar um estilo especial à primeira letra de um texto.

Torne a primeira linha especial
Este exemplo demonstra como adicionar um estilo especial à primeira linha de um texto.

Sintaxe

A sintaxe dos pseudo-elementos:

selector:pseudo-element {property: value}

As classes CSS também podem ser usadas com pseudo-elementos:

The :first-line Pseudo-element

O pseudo-elemento "first-line" é usado para adicionar estilos especiais à primeira linha de um texto em um seletor:

p {font-size: 12pt}
p:first-line {color: #0000FF; font-variant: small-caps}

<p>Algum texto que termine com duas ou mais linhas</p>

A saída poderia ser algo assim:

No exemplo acima o navegador exibe a primeira linha formatada de acordo com o pseudo-elemento "first-line". Onde o navegador quebra a linha depende do tamanho da janela do navegador.

Observação: O pseudo-elemento "first-line" pode somente ser usado com elementos em nível de bloco.

Observação: As seguintes propriedades aplicam-se ao pseudo-elemento "first-line":

• font properties (propriedades de fonte)
• color properties (propriedades de cor)
• background properties (propriedades de plano de fundo)
• word-spacing (espaçamento enter palavras)
• letter-spacing (espaçamento entre letras)
• text-decoration (decoração de texto)
• vertical-align (alinhamento vertical)
• text-transform (transformação de texto)
• line-height (altura da linha)
• clear (limpar)

Observação: O IE 4.01 e o IE 5.0 não suportam o pseudo-elemento "first-line", mas o IE 5.5 sim.

Observação: O NN 4.5 não suporta o pseudo-elemento "first-line".

O Pseudo-elemento :first-letter

The "first-letter" pseudo-element is used to add special style to the first letter of the text in a selector:

p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}

<p>A primeira palavra de um artigo.</p>

A saída poderia ser algo assim:

Observação: O pseudo-elemento "first-letter" somente pode ser usado com elementos em nível de bloco.

Observação: As seguintes propriedades aplicam-se ao pseudo-elemento "first-letter":

• font properties (propriedades de fonte)
• color properties (propriedades de cor)
• background properties (propriedades de plano de fundo)
• margin properties (propriedades de margem)
• padding properties (propriedades de enchimento)
• border properties (propriedades de borda)
• text-decoration (decoração de texto)
• vertical-align (alinhamento vertical) (somente se 'float' está 'none')
• text-transform (transformação de texto)
• line-height (altura da linha)
• float (flutuação)
• clear (limpar)

Observação: O IE 4.01 e o IE 5.0 não suportam o pseudo-elemento "first-letter", mas o IE 5.5 sim.

Observação: O NN 4.5 não suporta o pseudo-elemento "first-letter".

Os Pseudo-elementos e as Classes CSS

Pseudo-elementos podem ser combinados com classes CSS:

p.article:first-letter {color: #FF0000}

<p class="article">Um parágrafo em um artigo</p>

O exemplo acima tornará a primeira letra de todos os parágrafos com a class="article" vermelhos.

Pseudo-elementos Múltiplos

Vários pseudo-elementos podem ser combinados:

p {font-size: 12pt}
p:first-letter {color: #FF0000; font-size: 200%}
p:first-line {color: #0000FF}

<p>As primeiras palavras de um artigo</p>

A saída poderia ser algo assim:

No exemplo acima a primeira letra do parágrafo será vermelha com um tamanho de fonte de 24pt. O resto da primeira linha seria azul enquanto que o resto do parágrafo estaria na cor padrão.

CSS2 - O Pseudo-elemento :before

O pseudo-elemento ":before" pode ser usado para inserir algum conteúdo antes de um elemento.

O estilo abaixo tocará um som antes de cada ocorrência do elemento título um.

CSS2 - O Pseudo-elemento :after

O pseudo-elemento ":after" pode ser usado par ainserir algum conteúdo depois de um elemento.

O estilo abaixo tocará um som após cada ocorrência do elemento título um.

Pseudo-elements

NN: Netscape, IE: Internet Explorer, W3C: Padrão Web