Pseudo-elementos

No Laboratório Belavista, a primeira letra de um artigo de tipografia pode virar capitel ornamental — sem envolver a letra num <span>. Pseudo-elementos estilizam partes ou criam filhos virtuais.

O exemplo deste capítulo é 35-pseudo-elementos, no pacote que acompanha o volume. Altere a cor de ::first-letter, preveja, recarregue e confira. Ciclo: ler → digitar → mudar → prever → recarregar → conferir.

O que você vai aprender

• Usar ::before e ::after com content.
• Estilizar ::first-letter e ::first-line.
• Marcar seleção com ::selection.
• Distinguir pseudo-elemento de pseudo-classe.
• Evitar texto real só em content (acessibilidade).

O que é

Um pseudo-elemento mira uma fatia do elemento (::first-letter) ou injeta um filho gerado (::before / ::after). A sintaxe moderna leva dois dois-pontos: ::.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pseudo-elementos — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <article class="nota">
      <h1>Caderno da oficina</h1>
      <p class="lead">Tipografia móvel exige paciência e tinta fresca.</p>
      <p class="chip">Inscrições abertas</p>
    </article>
  </body>
</html>

::before e ::after

Só existem se você declarar content (mesmo ""). São o primeiro e o último filho gerados do elemento.

.chip {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 1px solid #8b1e1e;
  position: relative;
}

.chip::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  inline-size: 4px;
  background: #8b1e1e;
}

.chip::after {
  content: "";
  /* decoração vazia: leitores de tela tendem a ignorar string vazia */
}

Texto em content: "Novo" pode ser anunciado por leitores de tela. Para enfeite, prefira content: "" e fundo/borda. Informação importante fica no HTML.

Capitel e primeira linha

.lead::first-letter {
  float: left;
  font-size: 2.6em;
  font-weight: 700;
  line-height: 1;
  margin-inline-end: 0.2rem;
  color: #8b1e1e;
}

.lead::first-line {
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.nota ::selection {
  background: #8b1e1e;
  color: #fff;
}

Erro comum: escrever :before com um dois-pontos e misturar com :hover. Funciona por compatibilidade, mas no volume use :: para pseudo-elementos e : para pseudo-classes.

Outros úteis

::marker estiliza o marcador de lista. ::placeholder o texto de dica em campos. Não force conteúdo crítico só nesses ganchos.

Critério para avançar

Você avança se: cria uma barra com ::before e content: ""; aplica capitel em .lead; explica por que texto importante não deve viver só em content.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. O que falta para ::before aparecer na tela?
2. Pseudo-elemento e pseudo-classe: qual mira estado e qual mira fatia/filho gerado?
3. Por que content: "Obrigatório" num rótulo visual é arriscado?

Respostas comentadas

1. A propriedade content (ainda que seja string vazia).
2. Pseudo-classe = estado (:hover, :focus-visible). Pseudo-elemento = parte ou filho gerado (::first-letter, ::before).
3. Pode ser anunciado de forma estranha ou omitido do HTML semântico; o significado deve estar no markup.