Um pseudoelemento CSS é usado para estilizar partes especificadas de um elemento.
Por exemplo, pode ser usado para:
Estilize a primeira letra ou linha de um elemento
Inserir conteúdo antes ou depois do conteúdo de um elemento
A sintaxe dos pseudoelementos:
selector::pseudo-element {
property: value;
}O pseudoelemento ::first-line é usado para adicionar um estilo especial para a primeira linha de um texto.
O exemplo a seguir formata a primeira linha do texto em todos os <p> elementos:
p::first-line
{
color: #ff0000;
font-variant: small-caps;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>
</body>
</html>
Nota: O pseudoelemento ::first-line só pode ser aplicado em nível de bloco elementos.
As propriedades a seguir se aplicam ao ::first-line pseudo-elemento:
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
Observe a notação de dois pontos duplos - ::first-line versus :first-line
Os dois pontos duplos substituíram os dois pontos simples notação para pseudoelementos em CSS3. Esta foi uma tentativa do W3C de distinguir entre pseudoclasses e pseudoelementos.
A sintaxe de dois pontos únicos foi usada para pseudoclasses e pseudoelementos em CSS2 e CSS1.
Para compatibilidade com versões anteriores, a sintaxe de dois pontos é aceitável para CSS2 e CSS1 pseudo-elementos.
O pseudoelemento ::first-letter é usado para adicionar um estilo especial ao primeiro letra de um texto.
O exemplo a seguir formata a primeira letra do texto em todos os <p> elementos:
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>
<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>
Nota: O pseudoelemento ::first-letter só pode ser aplicado em nível de bloco elementos.
As seguintes 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 podem ser combinados com classes HTML:
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
} Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>
<p class="intro">This is an introduction.</p>
<p>This is a paragraph with some text. A bit more text even.</p>
</body>
</html>
O exemplo acima exibirá a primeira letra dos parágrafos com class="intro", em vermelho e em tamanho maior.
Vários pseudoelementos também podem ser combinados.
No exemplo a seguir, a primeira letra de um parágrafo será vermelha, em um tamanho de fonte xx grande. O resto da primeira linha será azul e em letras maiúsculas. O restante do parágrafo terá o tamanho e a cor da fonte padrão:
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
}Experimente você mesmo →
<!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>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>
O pseudoelemento ::before pode ser usado para inserir algum conteúdo antes do conteúdo de um elemento.
O exemplo a seguir insere uma imagem antes do conteúdo de cada elemento <h1>:
h1::before
{
content: url(smiley.gif);
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: url(smiley.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>
<h1>This is a heading</h1>
</body>
</html>
O pseudoelemento ::after pode ser usado para inserir algum conteúdo após o conteúdo de um elemento.
O exemplo a seguir insere uma imagem após o conteúdo de cada elemento <h1>:
h1::after
{
content: url(smiley.gif);
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: url(smiley.gif);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>
<h1>This is a heading</h1>
</body>
</html>
O pseudoelemento ::marker seleciona o marcadores de itens da lista.
O exemplo a seguir estiliza os marcadores dos itens da lista:
::marker {
color: red;
font-size: 23px;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
::marker {
color: red;
font-size: 23px;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>
O pseudoelemento ::selection corresponde à parte de um elemento que é selecionado por um usuário.
As seguintes propriedades CSS podem ser aplicadas a ::selection: cor, plano de fundo, cursor e contorno.
O exemplo a seguir torna o texto selecionado vermelho sobre fundo amarelo:
::selection {
color: red;
background: yellow;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>
<h1>Select some text on this page:</h1>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
</body>
</html>
Exemplo
p::after
Exemplo de descrição
Insira algo após o conteúdo de cada elemento <p>
Exemplo
p::before
Exemplo de descrição
Insira algo antes do conteúdo de cada elemento <p>
Exemplo
p::first-letter
Exemplo de descrição
Seleciona a primeira letra de cada elemento <p>
Exemplo
p::first-line
Exemplo de descrição
Seleciona a primeira linha de cada elemento <p>
Exemplo
::marker
Exemplo de descrição
Seleciona os marcadores dos itens da lista
Exemplo
p::selection
Exemplo de descrição
Seleciona a parte de um elemento que é selecionado por um usuário
Exemplo
a:active
Exemplo de descrição
Seleciona o link ativo
Exemplo
input:checked
Exemplo de descrição
Seleciona todos os elementos <input> verificados
Exemplo
input:disabled
Exemplo de descrição
Seleciona todos os elementos <input> desabilitados
Exemplo
p:empty
Exemplo de descrição
Seleciona todo elemento <p> que não possui filhos
Exemplo
input:enabled
Exemplo de descrição
Seleciona todos os elementos <input> habilitados
Exemplo
p:first-child
Exemplo de descrição
Seleciona todos os elementos <p> que são o primeiro filho de seu pai
Exemplo
p:first-of-type
Exemplo de descrição
Seleciona cada elemento <p> que é o primeiro elemento <p> de seu pai
Exemplo
input:focus
Exemplo de descrição
Seleciona o elemento <input> que está em foco
Exemplo
a:hover
Exemplo de descrição
Seleciona links ao passar o mouse
Exemplo
input:in-range
Exemplo de descrição
Seleciona elementos <input> com um valor dentro de um intervalo especificado
Exemplo
input:invalid
Exemplo de descrição
Seleciona todos os elementos <input> com um valor inválido
Exemplo
p:lang(it)
Exemplo de descrição
Seleciona cada elemento <p> com um valor de atributo lang começando com "it"
Exemplo
p:last-child
Exemplo de descrição
Seleciona todos os elementos <p> que são o último filho de seu pai
Exemplo
p:last-of-type
Exemplo de descrição
Seleciona cada elemento <p> que é o último elemento <p> de seu pai
Exemplo
a:link
Exemplo de descrição
Seleciona todos os links não visitados
Exemplo
:not(p)
Exemplo de descrição
Seleciona todos os elementos que não são um elemento <p>
Exemplo
p:nth-child(2)
Exemplo de descrição
Seleciona cada elemento <p> que é o segundo filho de seu pai
Exemplo
p:nth-last-child(2)
Exemplo de descrição
Seleciona cada elemento <p> que é o segundo filho de seu pai, contando a partir do último filho
Exemplo
p:nth-last-of-type(2)
Exemplo de descrição
Seleciona cada elemento <p> que é o segundo elemento <p> de seu pai, contando a partir do último filho
Exemplo
p:nth-of-type(2)
Exemplo de descrição
Seleciona cada elemento <p> que é o segundo elemento <p> de seu pai
Exemplo
p:only-of-type
Exemplo de descrição
Seleciona todo elemento <p> que é o único elemento <p> de seu pai
Exemplo
p:only-child
Exemplo de descrição
Seleciona todo elemento <p> que é filho único de seu pai
Exemplo
input:optional
Exemplo de descrição
Seleciona elementos <input> sem nenhum atributo "obrigatório"
Exemplo
input:out-of-range
Exemplo de descrição
Seleciona elementos <input> com um valor fora de um intervalo especificado
Exemplo
input:read-only
Exemplo de descrição
Seleciona elementos <input> com um atributo "readonly" especificado
Exemplo
input:read-write
Exemplo de descrição
Seleciona elementos <input> sem atributo "somente leitura"
Exemplo
input:required
Exemplo de descrição
Seleciona elementos <input> com um atributo "obrigatório" especificado
Exemplo
root
Exemplo de descrição
Seleciona o elemento raiz do documento
Exemplo
#news:target
Exemplo de descrição
Seleciona o elemento #news ativo atual (clicado em uma URL que contém esse nome de âncora)
Exemplo
input:valid
Exemplo de descrição
Seleciona todos os elementos <input> com um valor válido
Exemplo
a:visited
Exemplo de descrição
Seleciona todos os links visitados