Pseudo-elementos: ::before, ::after e ::placeholder

Pseudo-elemento é como uma pseudo-classe, mas em vez de estilizar um estado do elemento, ele cria um elemento "virtual" dentro ou em volta dele, sem precisar mexer no HTML.

A sintaxe é seletor::pseudo-elemento (com dois dois-pontos, por convenção moderna - : ainda funciona por compatibilidade, mas :: é o padrão atual).

::before e ::after: conteúdo injetado antes/depois

<p class="aviso">Esta seção está em construção.</p>

.aviso::before {
  content: "⚠️ ";
}

O resultado na tela é: "⚠️ Esta seção está em construção." - o emoji foi injetado pelo CSS, sem existir no HTML. Você pode injetar texto, símbolos, ícones unicode, aspas decorativas.

Truques clássicos com ::before e ::after:

/* Aspas decorativas em citação */
blockquote::before { content: "\201C"; } /* " */
blockquote::after  { content: "\201D"; } /* ” */

/* Bullet customizado */
li::before {
  content: "→ ";
  color: #1a73e8;
}

/* Linha embaixo de link */
a::after {
  content: "";
  display: block;
  height: 2px;
  background: #1a73e8;
  transform: scaleX(0);
  transition: transform 0.3s;
}
a:hover::after { transform: scaleX(1); }

O último é o famoso "sublinhado animado" de link: a ::after é uma linha que escala de 0 a 1 quando o link recebe :hover. Sem HTML extra, sem JavaScript.

content é obrigatório

::before e ::after não aparecem sem a propriedade content. Mesmo que seja vazia:

.balao::before {
  content: "";   /* obrigatoriamente declarado */
  position: absolute;
  /* ... estilo da setinha ... */
}

content aceita:

• String entre aspas: content: "→"
• String com unicode escapado: content: "\2192" (mesmo →)
• Função attr(): content: attr(data-icon) - pega valor de um atributo HTML
• counter(): content: counter(secao) - numeração automática
• Vazio (""): o pseudo-elemento existe, mas sem texto - útil quando você quer só a parte visual (linha, seta, ícone de fundo).

Outros pseudo-elementos úteis

input::placeholder {
  color: #999;
  font-style: italic;
}

p::first-letter {
  font-size: 3em;
  float: left;
  line-height: 1;
}

p::first-line {
  font-weight: bold;
}

p::selection {
  background: #ffeb3b;
  color: #000;
}

• ::placeholder: o texto que aparece dentro de um input vazio.
• ::first-letter: a primeira letra do parágrafo. Caplets de livro antigo são feitos com isso.
• ::first-line: a primeira linha. Pega linhas diferentes se o parágrafo for reformatado.
• ::selection: o trecho que o usuário selecionou com o mouse. Customizar isso é divertido - alguns sites usam cor de marca em vez do azul default do navegador.

Detalhe importante: ::before é inline por padrão

.caixa::before {
  content: "Importante: ";
  /* display: inline por padrão */
}

Se você quer dar width, height, margin vertical, vai precisar mudar o display:

.caixa::before {
  content: "";
  display: block;   /* ou inline-block */
  width: 16px;
  height: 16px;
  background: #1a73e8;
}

• ::before / ::after: conteúdo injetado antes/depois. Exigem content.
• ::placeholder: texto de hint em input.
• ::first-letter / ::first-line: destaques tipográficos.
• ::selection: o que o usuário selecionou.
• Pseudo-elemento é inline por padrão - troque o display se precisar de tamanho/margem.

Dica: para ícones de UI, é comum usar uma fonte de ícones (como Material Symbols ou Font Awesome) via content: "\e001" (o caractere unicode do ícone). Mas isso é dependência externa; no nível avançado falamos de abordagens mais modernas.

No próximo nó, vamos para a position - a propriedade que tira os elementos do fluxo "normal" da página e os coloca onde você quiser.