Voltar para o site

Pseudo-elementos CSS

Publicado em: 03/06/2006

Sintaxe

São usados em CSS, para adicionar efeitos a um seletor, ou a parte de um seletor.

A sintaxe dos pseudo-elementos:

seletor:pseudo-elemento {propriedade: valor;}

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

Esta regra permite que você defina diferentes efeitos para pseudo-elementos localizados em diferentes lugares em uma mesma página.

seletor.classe:pseudo-elemento {propriedade: valor;}

O pseudo-elemento first-letter

O pseudo-elemento first-letter é usado para obter um efeito especial na primeira letra de um texto.

p {
	font-size: 12px;
}
p:first-letter {
	font-size:300%;
}

<p>Este texto destina-se a demonstrar o 
 pseudo-elemento first-letter, bla...bla...bla...
bla... bla...bla...bla...bla...bla... bla...bla...
bla... bla...bla...bla...bla...bla... bla...bla...</p>

O código acima produzirá esse efeito

Este texto destina-se a demonstrar o pseudo-elemento first-letter, bla...bla...bla... bla... bla...bla...bla...bla...bla... bla...bla... bla... bla...bla...bla...bla...bla... bla...bla... bla... bla...bla...bla...bla...bla... bla...bla... bla... bla...bla...bla...bla...bla... bla...bla...

O pseudo-elemento first-letter somente pode ser usado com elementos de bloco.

Propriedades aplicáveis ao pseudo-elemento first-letter

  • font - propriedades de letras
  • color - propriedades de cores
  • background - propriedades de fundo
  • margin - propriedades de margens
  • padding - propriedades de espaçamentos
  • border - propriedades de bordas
  • text-decoration
  • vertical-align (somente para "float: none)
  • text-transform
  • line-height
  • float
  • clear

O pseudo-elemento first-line

O pseudo-elemento first-line é usado para obter um efeito especial na primeira linha de um texto.

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

<p>Um texto qualquer dentro de um pseudo-elemento first-line,<br /> para um  efeito especial na primeira linha</p>

O código acima produzirá esse efeito

Um texto qualquer dentro de um pseudo-elemento first-line,
para um efeito especial na primeira linha. Notar a mudança de cor e o tipo de letra small-caps na primeira linha.

No exemplo acima toda a primeira linha sofre o efeito da definição do pseudo-elemento. A "quebra" da linha foi forçada com uso de um elemento br.

O pseudo-elemento first-line somente pode ser usado com elementos de bloco.

Propriedades aplicáveis ao pseudo-elemento first-line

  • font - propriedades de letras
  • color - propriedades de cores
  • background - propriedades de fundo
  • word-spacing - espaçamento entre palavras
  • letter-spacing - espaçamento entre letras
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Pseudo-elementos em classes CSS

Pseudo-elementos podem ser combinados com classes CSS

p.combinado:first-letter { 
	color: #FF0000; 
	font-size:xx-large; 
}

<p class="combinado"> Uma frase com efeito especial combinado</p>

O código acima produzirá esse efeito

Uma frase com efeito especial combinado

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo