5.1 Pseudo-elementos principais
Os pseudo-elementos em CSS permitem que os desenvolvedores adicionem estilos e conteúdo a partes do documento que não podem ser destacadas com seletores normais. Eles criam elementos "virtuais" que podem ser estilizados como se fossem parte da marcação HTML. Essa é uma ferramenta poderosa para criar layouts complexos e melhorar a aparência das páginas da web.
O que são pseudo-elementos
Os pseudo-elementos são palavras-chave adicionadas aos seletores, que permitem estilizar partes específicas dos elementos. Eles criam elementos virtuais que se tornam parte da aparência visual, mas não alteram a marcação HTML original. Pseudo-elementos são geralmente usados para estilizar a primeira letra, linha de texto, adicionar elementos decorativos e outras tarefas.
Principais pseudo-elementos
Alguns dos pseudo-elementos mais usados incluem:
::before: adiciona conteúdo antes do conteúdo do elemento selecionado::after: adiciona conteúdo após o conteúdo do elemento selecionado::first-letter: estilização da primeira letra do elemento::first-line: estilização da primeira linha do elemento::selection: estilização do texto selecionado pelo usuário
Como usar pseudo-elementos
Pseudo-elementos em CSS são representados pelo duplo dois pontos (::), embora alguns pseudo-elementos também possam suportar a notação antiga de um único dois pontos (:) para compatibilidade retroativa.
Sintaxe:
seletor::pseudo-elemento {
propriedade: valor;
propriedade: valor;
propriedade: valor;
...
}
5.2 Exemplos de uso de pseudo-elementos
1. Adição de elementos decorativos
Pseudo-elementos são frequentemente usados para adicionar elementos decorativos antes ou depois do conteúdo de um elemento:
/* Adicionando ícone antes do texto de link */
a::before {
content: "🔗";
margin-right: 5px;
}
/* Adicionando elemento decorativo após o parágrafo */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
Nestes exemplos, os pseudo-elementos ::before e ::after são usados para adicionar um ícone antes do texto do link e um elemento decorativo após o parágrafo, respectivamente.
2. Estilização das primeiras letras e linhas
Pseudo-elementos podem ser usados para estilizar as primeiras letras ou primeiras linhas de texto, o que é frequentemente utilizado na tipografia:
/* Estilização da primeira letra do parágrafo */
p::first-letter {
font-size: 2em;
font-weight: bold;
color: #3498db;
}
/* Estilização da primeira linha do parágrafo */
p::first-line {
font-weight: bold;
color: #e74c3c;
}
Nestes exemplos, os pseudo-elementos ::first-letter e ::first-line são usados para estilizar a primeira letra e a primeira linha do parágrafo.
3. Seleção de texto
O pseudo-elemento ::selection é usado para estilizar o texto que é selecionado pelo usuário:
/* Estilização do texto selecionado */
::selection {
background-color: #3498db;
color: white;
}
Neste exemplo, o texto selecionado pelo usuário terá um fundo azul e a cor do texto branca.
5.3 Características e limitações dos pseudo-elementos
Limitações:
- Apenas um uso: os pseudo-elementos
::beforee::afterpodem ser usados apenas uma vez em cada elemento - Requisito de content: os pseudo-elementos
::beforee::afterexigem o uso da propriedade content, mesmo que esteja vazia - Compatibilidade com navegadores: navegadores modernos suportam os dois pontos duplos para indicar pseudo-elementos, mas para pseudo-elementos antigos, um único dois pontos também funciona
Exemplo de uso da propriedade content
/* Exemplo de uso de pseudo-elemento vazio para elemento decorativo */
div::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
}
Neste exemplo, o pseudo-elemento vazio ::before é usado para adicionar uma faixa decorativa antes do conteúdo do div.
GO TO FULL VERSION