6.1 Propriedade content
Os pseudo-elementos ::before e ::after permitem adicionar conteúdo antes e depois do conteúdo de um elemento, sem precisar modificar o código HTML.
Eles são amplamente usados para fins decorativos, melhorar a interface do usuário e criar páginas web mais interativas.
O que são pseudo-elementos ::before e ::after?
Pseudo-elementos ::before e ::after criam elementos virtuais que são inseridos respectivamente antes e depois
do conteúdo do elemento selecionado. Esses pseudo-elementos são frequentemente usados para adicionar ícones, elementos decorativos,
ou outros efeitos visuais.
Sintaxe antes:
seletor::before {
content: "texto ou outros valores";
/* estilos */
}
Sintaxe depois:
seletor::after {
content: "texto ou outros valores";
/* estilos */
}
Propriedade content
A propriedade chave para os pseudo-elementos ::before e ::after é content. Essa propriedade define o conteúdo
do pseudo-elemento. Pode ser uma string de texto, uma imagem, ou até mesmo um valor vazio, se apenas um efeito visual for necessário.
Valores possíveis para a propriedade content:
- Texto:
"texto" - Imagem:
url("path/to/image.png") - Valor vazio:
"" - Atributos:
attr(attributeName) - Contadores:
counter(name)
6.2 Exemplos de uso de ::before e ::after
Adicionando elementos decorativos
Exemplo 1: Adicionando um ícone antes do texto
Neste exemplo, o pseudo-elemento ::before é usado para adicionar um ícone antes do texto do link.
margin-right adiciona espaço entre o ícone e o texto:
/* Adicionando um ícone antes do texto do link */
a::before {
content: "🔗";
margin-right: 5px;
}
Exemplo 2: Adicionando um elemento decorativo após o parágrafo
Neste exemplo, o pseudo-elemento ::after adiciona um elemento decorativo após o parágrafo. display: block e
text-align: right são usados para alinhar o elemento à direita:
/* Adicionando um elemento decorativo após o parágrafo */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
Criando bordas e fundos decorativos
Exemplo 3: Borda decorativa ao redor do elemento
Neste exemplo, o pseudo-elemento ::before é usado para criar uma faixa decorativa acima do elemento
div. position: absolute e top: -10px permitem posicionar a faixa acima do elemento:
/* Borda decorativa ao redor do elemento */
div::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
Exemplo 4: Adicionando aspas automaticamente
Neste exemplo, os pseudo-elementos ::before e ::after são usados para adicionar aspas ao redor do bloco de citação:
/* Adicionando aspas automaticamente ao redor da citação */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
Exemplo 5: Numeração de títulos
Neste exemplo, o pseudo-elemento ::before é usado para adicionar um número antes do título h2.
counter-increment aumenta o valor do contador, e content: counter(section) insere o valor atual do contador:
/* Numeração de títulos */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
6.3 Aplicação e estilização de pseudo-elementos
Estilização de pseudo-elementos
Os pseudo-elementos podem ser estilizados assim como qualquer outro elemento. Eles suportam a maioria das propriedades CSS, incluindo cor, fundo, bordas, tamanhos e posicionamento.
Usando pseudo-elementos para criar layouts complexos
Os pseudo-elementos são frequentemente usados para criar elementos decorativos em layouts, como bordas, sombras e outros efeitos visuais, sem a necessidade de adicionar elementos HTML adicionais.
Exemplo: cada elemento da lista terá um marcador azul antes do texto:
ul li::before {
content: "•";
color: blue;
margin-right: 5px;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
6.4 Exemplo de implementação completa
/* Adicionando um ícone antes do texto do link */
a::before {
content: "🔗";
margin-right: 5px;
}
/* Adicionando um elemento decorativo após o parágrafo */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
/* Borda decorativa ao redor do elemento */
.decorative-box {
position: relative;
}
.decorative-box::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
/* Adicionando aspas automaticamente ao redor da citação */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
/* Numeração de títulos */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de pseudo-elementos ::before e ::after</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">Link com ícone</a>
<p>Parágrafo com elemento decorativo após o texto</p>
<div class="decorative-box">Elemento com borda decorativa</div>
<blockquote>Citação com aspas automáticas</blockquote>
<h2>Título com numeração</h2>
<h2>Outro título</h2>
</body>
</html>
GO TO FULL VERSION