Curso de CSS / Pseudoelementos: ::before e ::after

Pseudo-elementos CSS estilizam uma parte específica de um elemento ou criam uma caixa apenas para apresentação. ::before e ::after podem adicionar conteúdo decorativo, mas informações essenciais devem permanecer no HTML em vez de depender de conteúdo gerado.

Diferencie pseudoclasses e pseudoelementos

As pseudoclasses explicadas em Combinadores e pseudoclasses CSS selecionam em qual estado ou condição um elemento existente se encontra. a:hover direciona o próprio link sobre o qual o mouse está passando. Um pseudoelemento direciona uma parte específica do elemento ou sua representação criada. a::after decora um pseudoelemento gerado após o conteúdo do link. No código novo, use um dois-pontos para pseudoclasses e dois dois-pontos para pseudoelementos para facilitar a distinção entre os dois.

a:hover { color: #1d4ed8; }
a::after { content: ""; }

before e after não adicionam tags HTML reais de irmão fora do elemento selecionado. Geram caixas antes e depois do conteúdo, dentro do elemento selecionado. Ferramentas de desenvolvedor podem exibir pseudoelementos como linhas separadas, mas isso não é o mesmo que ter spans escritos no HTML original. Você não pode simplesmente recuperar pseudoelementos criados por código que procura elementos filhos comuns.

Entenda content e display

h1::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
}

content: "" cria um pseudoelemento sem texto. Mesmo que o conteúdo esteja vazio, ele pode aparecer como uma caixa decorativa se você der a ele um fundo e tamanho. Por outro lado, se o conteúdo for omitido ou alterado para none, este pseudoelemento não é criado e o ponto não aparece mesmo que o tamanho e o fundo sejam adicionados.

A exibição padrão de ::before e ::after é inline. Use inline-block para um ponto decorativo que precise de largura e altura explícitas, e block para uma linha abaixo do conteúdo. Para esses pseudoelementos, omitir content ou defini-lo como none impede a criação da caixa gerada. Para mais detalhes, veja CSS display: block, inline, inline-block e ocultação. Veja MDN: ::before.

currentColor é uma palavra-chave que se refere ao valor da cor do elemento, ou seja, a cor atual do texto. Se você mudar o título de verde para azul, o plano de fundo do pseudoelemento também usará a mesma cor. border-radius: 50% arredonda os cantos de caixas de mesma largura e altura para fazê-las parecer círculos. margin-right é o espaço externo entre pontos e letras.

Adicione um ponto antes de um título e uma linha após um link

O seguinte exemplo completo cria um ponto de 12px antes do título e uma linha de 2px abaixo do link. Ele também mantém o sublinhado padrão no próprio link, de modo que a separação do link é mantida mesmo se a linha extra desaparecer. Ao passar o mouse ou ao focar pelo teclado, as linhas decorativas ficam mais grossas, com 4px.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; color: #333; }
    h1 { color: #087f5b; font-size: 30px; }
    h1::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 10px;
      border-radius: 50%;
      background-color: currentColor;
    }
    a { display: inline-block; color: #087f5b; text-decoration: underline; }
    a::after {
      content: "";
      display: block;
      height: 2px;
      margin-top: 4px;
      background-color: currentColor;
    }
    a:hover::after, a:focus-visible::after { height: 4px; }
    a:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 4px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>We open at 9 a.m. every day.</p>
  <a href="#visit">Visitor Information</a>
  <h2 id="visit">What to bring</h2>
  <p>Bring a water bottle and comfortable shoes.</p>
</body>
</html>

Salve como index.html e execute-o. O título mantém o texto real “Small Garden” (Pequeno Jardim) e o círculo na frente é uma decoração de CSS. O link também tem o nome “Visitor Information” (informações para visitantes) e o destino de navegação definidos no HTML. a:hover::after é uma expressão que seleciona o after de a no estado hover. Notações longas parecem menos complicadas se você as ler separadamente pelo número de dois-pontos e pela ordem de seleção.

O diagrama ilustra o mesmo HTML com e sem os pseudoelementos decorativos. O texto e o destino do link permanecem inalterados. No exemplo completo, a linha decorativa do link tem 2px de altura por padrão e se torna 4px ao passar o mouse ou ao receber foco visível pelo teclado.

Mantenha informações essenciais no HTML

Diferentes leitores de tela e navegadores podem apresentar conteúdo gerado de maneiras diferentes, então não dependa de colocar informações essenciais apenas em pseudoelementos. É mais claro escrever as condições no rótulo real ou na frase de orientação do que informar as condições de entrada com content: "Required". O simples fato de um pseudoelemento estar visível não confirma sua acessibilidade.

Os pseudoelementos ::before e ::after não se aplicam a elementos substituídos como img, cujo conteúdo vem de um recurso externo. Aplique-a a elementos que contenham conteúdo, como h1 ou a, como neste exemplo. Se você precisar de decoração ao redor da imagem, você pode considerar ter um elemento HTML separado envolvendo a imagem e decorar os pseudoelementos desse elemento.

Diagnostique pseudoelementos ausentes

1. Substitua content: ""; em h1::before por content: none;. O texto do título deve permanecer o mesmo, mas apenas o ponto deve desaparecer. Após a confirmação, restaure-o para uma string vazia.
2. Substitua display: inline-block; no ponto por display: inline;. Observe que decorações inline sem texto não conseguem manter o ponto original de 12px apenas com largura·altura. Retorne para inline-block.
3. Altere a cor do h1 para #1d4ed8. Certifique-se de que os pontos também fiquem azuis e os links permaneçam verdes. currentColor não se refere a uma única cor em toda a página.
4. Passe o mouse sobre o link e veja se a linha fica mais grossa. Afaste o mouse e use Tab para mover o foco para o link e verifique se a linha e o contorno estão visíveis juntos.

Ao verificar, primeiro verifique se o seletor corresponde ao elemento real e se o conteúdo é válido, depois observe o display, o tamanho e o plano de fundo. Se você alterar a altura da linha do link para 0, a linha não será visível, mas o pseudoelemento criado como conteúdo não desaparecerá necessariamente. Diferenciar entre “o elemento não foi criado” e “ele foi criado mas não tem área desenhável” pode ajudá-lo a identificar a causa da falha.

Após o exercício, restaure os valores originais e salve. Os pseudoelementos podem fornecer decoração sem elementos HTML extras, mas o conteúdo essencial deve permanecer disponível independentemente dessa decoração. Comece com um ponto ou linha e verifique se o texto real, o destino do link e o comportamento pelo teclado permanecem intactos.