Pseudo-classes e pseudo-elementos no css
Bem-vindo(a) ao post no blog.
Nesse Post você vai aprender a Diferença entre pseudo-classes (estado) e pseudo-elementos (decoração); Usar :hover, :active, :focus e :nth-child; Criar efeitos visuais com ::before e ::after; Combinar comportamentos e estilos dinâmicos; Montar menus e botões animados apenas com CSS.
🧩 Pseudo-Classes: o comportamento dinâmico no CSS
As pseudo-classes indicam estados ou condições especiais de um elemento.
Exemplo: quando o mouse passa por cima (:hover), quando um campo está em foco (:focus), ou quando um link foi visitado (:visited).
Elas não criam novos elementos — apenas alteram o estilo dos existentes em situações específicas.
🔸 Principais pseudo-classes: Pseudo-classe Descrição
:hover → Quando o mouse passa sobre o elemento
:active → Quando o elemento está sendo clicado
:focus → Quando o elemento (input, botão, etc.) está em foco
:visited → Quando um link já foi visitado
:first-child → Primeiro filho dentro de um contêiner
:last-child → Último filho dentro de um contêiner
:nth-child(n) → Seleciona o filho na posição n (ou padrões)
🎨 Exemplo Prático — Botão com estados diferentes:
button {
background-color: #0077ff;
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background-color: #005fd4;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: 3px solid #00b4ff;
}
⚡ O botão ganha aparência clicável e profissional — brilhante no hover, com feedback visual ao clicar e foco claro.
🔸 Exemplo — Estilizando listas com nth-child
li:nth-child(odd) {
background-color: #f2f2f2;
}
li:nth-child(even) {
background-color: #e2e8ff;
}
💬 Isso alterna as cores de cada linha (muito usado em tabelas e listas de preços).
Você pode usar padrões dinâmicos, como:
li:nth-child(3n) {
color: #0077ff;
}
👉 Afeta todo terceiro item.
🪄 Pseudo-Elementos: criando o “CSS que desenha”
Os pseudo-elementos são diferentes:
Eles adicionam conteúdo “falso” (decorativo) antes ou depois de um elemento — perfeitos para ícones, destaques ou animações.
Os mais comuns são:
● ::before
● ::after
⚙️ Sintaxe:
h1::before {
content: "★ ";
color: gold;
}
h1::after {
content: " ★";
color: gold;
}
💡 content é obrigatório! Mesmo se for vazio, o pseudo-elemento precisa dele para existir.
Isso cria estrelas decorativas antes e depois do título sem alterar o HTML!
🔹 Espaçamentos e efeitos decorativos:
h2::after {
content: "";
display: block;
width: 50px;
height: 4px;
background-color: #0077ff;
margin: 8px auto;
border-radius: 2px;
}
💥 Esse código desenha uma linha colorida sob o título — usado em muitos sites profissionais.
🔧 Usando Pseudo-elementos para Design e Animação
Você pode usar ::before e ::after para adicionar camadas visuais, bordas animadas, sombreamentos, filtros e muito mais.
💎 Exemplo — Botão com brilho animado
button {
position: relative;
overflow: hidden;
background: #0077ff;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
}
button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.4);
transform: skewX(-20deg);
transition: left 0.4s;
}
button:hover::before {
left: 200%;
}
💥 Resultado: ao passar o mouse, uma faixa brilhante percorre o botão, como um reflexo de luz.
💬 Combinando Pseudo-Classes + Elementos
Você pode combinar ambos para criar comportamentos super ricos.
Exemplo — Subtítulo com linha animada:
h2 {
position: relative;
display: inline-block;
}
h2::after {
content: "";
position: absolute;
width: 0;
height: 3px;
bottom: 0;
left: 0;
background-color: #0077ff;
transition: width 0.3s;
}
h2:hover::after {
width: 100%;
}
💡 Aqui o ::after desenha uma linha que cresce sob o texto quando você passa o mouse — um efeito sublinhado animado minimalista e moderno.
📘 Para um melhor Aprendizado 🎯 Pratique com exercícios, desafios e projetos
🛠️ Projeto Prático — Menu Animado com Pseudo-elementos
Vamos juntar tudo que aprendemos nesta aula num menu interativo estiloso.
📄 index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Menu Animado</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="menu">
<a href="#">Início</a>
<a href="#">Serviços</a>
<a href="#">Portfólio</a>
<a href="#">Contato</a>
</nav>
</body>
</html>
📄 style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #89f7fe, #66a6ff);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Poppins', sans-serif;
}
.menu {
display: flex;
gap: 40px;
}
.menu a {
position: relative;
color: white;
text-decoration: none;
font-size: 18px;
padding: 6px 0;
}
.menu a::after {
content: "";
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background: white;
transition: width 0.3s ease;
}
.menu a:hover::after {
width: 100%;
}
.menu a:hover {
color: #222;
transition: color 0.3s;
}
💥 Resultado:
● Links com linha que se anima ao passar o mouse;
● Transição suave de cor no texto;
Menu moderno, sem precisar de JavaScript.
🎨 Técnicas Avançadas de Pseudo-elementos
Além de decorações, você pode usar pseudo-elementos para:
● Criar formas geométricas (::before com clip-path ou border-radius);
● Adicionar ícones via fonte ou Unicode;
● Gerar efeitos de sombra, destaque ou gradiente extra;
● Construir animações puramente visuais, como barras de progresso ou loading spinners.
Exemplo — Bolinhas pulsantes de carregamento:
.loader {
display: flex;
gap: 10px;
}
.loader div {
width: 14px;
height: 14px;
border-radius: 50%;
background: white;
animation: pulse 1.4s infinite ease-in-out;
}
.loader div:nth-child(2) { animation-delay: 0.2s; }
.loader div:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse {
0%, 80%, 100% { transform: scale(0.8); opacity: 0.6; }
40% { transform: scale(1); opacity: 1; }
}
💡 É leve, acessível e feito com apenas CSS!
Comentários
Postar um comentário