CSS Pseudoelementos
O
que são pseudoelementos?
Um
pseudoelemento CSS é usado para estilizar partes especificadas de um elemento.
- Estilize a primeira letra ou linha de um
elemento
- Insira
conteúdo antes ou depois do conteúdo de um elemento
O ::pseudoelemento de primeira linha
O ::first-line pseudoelemento é
usado para adicionar um estilo especial à primeira linha de um texto.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant:
small-caps;
}
</style>
</head>
<body>
<p>Você pode usar o pseudoelemento ::first-line
para adicionar um efeito especial à primeira linha de um texto. Mais um pouco
de texto. E ainda mais, e mais, e mais, e mais, e mais, e mais, e mais, e mais,
e mais, e mais, e mais, e mais.</p>
</body>
</html>
Nota: O ::first-line
pseudoelemento só pode ser aplicado a
elementos de nível de bloco.
As seguintes propriedades se aplicam ao ::first-line pseudoelemento:
- propriedades da fonte
- propriedades de cor
- propriedades de fundo
- espaçamento entre palavras
- espaçamento entre letras
- decoração de texto
- alinhamento vertical
- transformação de texto
- altura da linha
- claro
O
::pseudoelemento da primeira letra
O ::first-letter pseudoelemento é
usado para adicionar um estilo especial à primeira letra de um texto.
<!DOCTYPE
html>
<html>
<head>
<style>
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>
<p>Você
pode usar o pseudoelemento ::first-letter para adicionar um efeito especial ao
primeiro caractere de um texto!</p>
</body>
</html>
propriedades se aplicam ao pseudoelemento
::first-letter:
- propriedades da fonte
- propriedades de cor
- propriedades de fundo
- propriedades de margem
- propriedades de preenchimento
- propriedades de fronteira
- decoração de texto
- alinhamento vertical (somente se
"float" for "none")
- transformação de texto
- altura da linha
- flutuador
- claro
Pseudoelementos
e classes HTML
Pseudoelementos
podem ser combinados com classes HTML:
<!DOCTYPE
html>
<html>
<head>
<style>
p.intro::first-letter
{
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>
<p
class="intro">Esta é uma introdução.</p>
<p>Este
é um parágrafo com algum texto. Um pouco mais de texto ainda..</p>
</body>
</html>
Múltiplos
Pseudoelementos
Vários
pseudoelementos também podem ser combinados.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>Você pode combinar os
pseudoelementos ::first-letter e ::first-line para adicionar um efeito especial
à primeira letra e à primeira linha de um texto!</p>
</body>
</html>
CSS
- O pseudo-elemento ::before
O ::beforepseudoelemento pode
ser usado para inserir algum conteúdo antes do conteúdo de um elemento.
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: url(smiley.gif);
}
</style>
</head>
<body>
<h1>Este é um título</h1>
<p>O pseudoelemento ::before
insere conteúdo antes do conteúdo de um elemento.</p>
<h1>Este é um título</h1>
</body>
</html>
CSS
- O pseudo-elemento ::after
O ::after pseudoelemento pode
ser usado para inserir algum conteúdo após o conteúdo de um elemento.
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: url(smiley.gif);
}
</style>
</head>
<body>
<h1>Este é um título</h1>
<p>O pseudoelemento ::after
insere conteúdo após o conteúdo de um elemento.</p>
<h1>Este é um título</h1>
</body>
</html>
CSS
- O pseudoelemento ::marker
O ::markerpseudoelemento
seleciona os marcadores dos itens da lista.
<!DOCTYPE
html>
<html>
<head>
<style>
::marker
{
color: red;
font-size: 23px;
}
</style>
</head>
<body>
<ul>
<li>Café</li>
<li>Leite</li>
<li>Água</li>
</ul>
<ol>
<li>Primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
</ol>
</body>
</html>
CSS
- O pseudoelemento ::selection
O ::selectionpseudoelemento
corresponde à parte de um elemento selecionado por um usuário.
As
seguintes propriedades CSS podem ser aplicadas a ::selection: color, background, cursore outline.
<!DOCTYPE
html>
<html>
<head>
<style>
::selection
{
color: red;
background:yellow;
}
</style>
</head>
<body>
<h1>Selecione
algum texto nesta página:</h1>
<p>Este
é um parágrafo.</p>
<div>Este
é algum texto em um elemento div.</div>
</body>
</html>