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.
<html>
<head>
<style type="text/css">
p {
font-size: 12pt
}
p:first-letter {
font-size:300%;
}
</style>
</head>
<body>
<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>
</body>
</html>O código acima produzirá esse efeito
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.
<html>
<head>
<style type="text/css">
p {
font-size: 12pt
}
p:first-line {
color: #0000FF;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>Um texto qualquer dentro
de um pseudo-elemento first-line,
para um efeito especial na primeira linha</p>
</body>
</html>O código acima produzirá esse efeito
No exemplo acima toda a primeira linha sofre o efeito da definição do pseudo-elemento. A “quebra” da linha depente do tamanho da janela do browser.
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
<html>
<head>
<style type="text/css">
p.combinado:first-letter {
color: #FF0000;
font-size:xx-large;
}
</style>
</head>
<body>
<p class=”combinado”> Uma frase com efeito
especial combinado </p>
</body>
</html>O código acima produzirá esse efeito
