Banner propaganda da DevMedia - Cursos de desenvolvimento web

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®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo