Carregando...

Pseudo-elementos CSS

Pseudo-classes mudam a aparência quando um estado muda (:hover, :focus). Pseudo-elementos vão além: você pode estilizar uma parte do texto ou criar uma caixinha antes ou depois do conteúdo real — com dois-pontos duplos (::) e sem tags extras no HTML.

O que significa pseudo-elemento?

Um pseudo-elemento é uma palavra colada ao seletor com ::. Mira algo que não é um elemento completo no markup: a primeira letra, a primeira linha ou uma caixa gerada antes/depois do conteúdo. Para ::before e ::after quase sempre precisa de content para aparecer algo.

Quatro pseudo-elementos comuns

Comece por estes. A forma antiga com um só dois-pontos (:before) ainda funciona em muitos navegadores — escreva mesmo assim a moderna com duplo.

📊 Pseudo-elementos CSS do dia a dia

Pseudo-elemento O que estiliza Exemplo
::before Caixa antes do conteúdo do elemento p::before
::after Caixa depois do conteúdo do elemento a::after
::first-letter Primeira letra de um bloco de texto p::first-letter
::first-line Primeira linha de um bloco de texto p::first-line

Antes do conteúdo — ::before e content

::before cria uma caixa virtual antes do texto real. Quase sempre você põe content — uma string, ou "" para caixa vazia decorativa.

Antes — aspas de abertura

css
CSS Code 
.quote::before {
content: "“";
color: #0f766e;
font-size: 1.5rem;
margin-right: 0.25rem;
}

Não esqueça content

Sem content, muitas regras ::before/::after não mostram nada. Para uma barra colorida ou ícone de fundo, content: "" basta.

Depois do conteúdo — ::after

::after é a mesma ideia depois do conteúdo — para unidade, selo ou um sufixo pequeno.

Depois — dica de link externo

css
CSS Code 
a.external::after {
content: " ↗";
font-size: 0.85em;
}

Não esconda o significado necessário aqui

Leitores de tela e algumas ferramentas tratam conteúdo gerado de forma irregular. Não coloque instruções importantes só em ::before/::after; deixe o texto real no HTML.

Primeira letra — ::first-letter

::first-letter estiliza a primeira letra de um bloco de texto — o clássico caractere grande no início do parágrafo.

Primeira letra — caractere inicial maior

css
CSS Code 
.lead::first-letter {
font-size: 2.5rem;
font-weight: 700;
color: #0f766e;
float: left;
line-height: 1;
margin-right: 0.15em;
}

Primeira linha — ::first-line

::first-line estiliza só a primeira linha visível — não «a primeira frase», e sim a linha que o navegador forma ao quebrar o texto.

Primeira linha — um pouco mais forte

css
CSS Code 
.lead::first-line {
font-weight: 600;
color: #334155;
}

Caixa vazia decorativa

Às vezes você só quer uma faixa colorida sem texto. content: "" basta.

before vazio — faixa decorativa

css
CSS Code 
.card::before {
content: "";
display: block;
height: 4px;
background: #0f766e;
margin-bottom: 0.75rem;
}

Bons hábitos

  • Pseudo-elemento = dois-pontos duplos (::before); pseudo-classe = simples (:hover)
  • Ponha content em ::before/::after se algo deve aparecer
  • Mantenha texto essencial no HTML, não só no conteúdo gerado
  • ::first-letter e ::first-line atuam em blocos com texto
  • Prefira :: moderno mesmo se o antigo :before ainda funcionar

Experimente você

  1. Página curta com parágrafo .quote, parágrafo .lead, link a.external e .card com texto.
  2. Adicione .quote::before { content: "“"; color: #0f766e; } e veja as aspas.
  3. No link com class external: a.external::after { content: " ↗"; }.
  4. Aumente .lead::first-letter em teal; estilize .lead::first-line com font-weight: 600.
  5. Adicione .card::before { content: ""; display: block; height: 4px; background: #0f766e; } para a barra de cima.

Erros comuns

  • Escrever :before quando queria um estado como :hover — estado um dois-pontos; caixa gerada dois
  • Esquecer content e nada aparecer
  • Colocar a única cópia de um aviso só em ::after
  • Esperar milagre de ::first-letter em elemento vazio ou só imagem
  • Confundir ::first-line com «primeira frase» — a quebra do navegador decide

Resumo

  • Pseudo-elementos com :: estilizam uma parte ou uma caixa gerada
  • ::before/::after precisam de content (string ou "")
  • ::first-letter e ::first-line pegam o início do bloco de texto
  • Significado crítico fica no HTML
  • Um dois-pontos = pseudo-classe; duplos = pseudo-elemento
  • Pratique com aspas, sufixo de link e parágrafo lead

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Css Tutorial