Docs executáveis de CSS: ::before e ::after

Q: Por que meu ::before ou ::after não aparece?

O motivo mais comum é a falta da propriedade content: sem ela o pseudo-elemento não é gerado. Use content: "" para uma caixa decorativa vazia. Outras causas: um pseudo-elemento inline com largura e altura (dê a ele display: block ou inline-block) ou um elemento como ou , que não comporta pseudo-elementos.

Q: Qual a diferença entre :before e ::before?

Nenhuma no comportamento. ::before, com dois dois-pontos, é a sintaxe atual que marca pseudo-elementos; :before, com um só, é a grafia antiga do CSS2 que os navegadores ainda aceitam para before, after, first-line e first-letter.

Q: Leitores de tela leem o conteúdo do ::before?

Em geral, sim: o texto em content costuma entrar no nome acessível, mas não pode ser selecionado nem copiado. Deixe a informação real no HTML e use pseudo-elementos para decoração e pequenas pistas visuais.

O que ::before e ::after fazem

::before insere uma caixa como primeiro filho de um elemento e ::after como último filho. O que vai dentro da caixa é definido pela propriedade content. Nada é acrescentado ao HTML: o navegador gera tudo a partir do CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before and after</title>
  <style>
    .price::before { content: "$"; color: #16a34a; }
    .price::after { content: " / month"; color: #6b7280; font-size: 14px; }
    .done::before { content: "✓ "; color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p class="price">9</p>
  <p class="done">Tests pass</p>
</body>
</html>

O HTML contém só 9 e Tests pass. O cifrão, o rótulo "/ month" e o sinal de visto vêm todos do CSS. Eles herdam os estilos do elemento (fonte, cor), a menos que você os sobrescreva, como fazem os exemplos acima.

Sintaxe

selector::before {
  content: "text";   /* required */
  /* any other styles */
}

selector::after {
  content: "";       /* empty string: a box with no text */
}

Valor de `content`	Resultado
`"text"`	Uma string. Use `"\A"` para uma quebra de linha (com `white-space: pre`) e `"\2192"` para um caractere Unicode (→)
`""`	Uma caixa vazia, para formas e decorações
`attr(data-label)`	O valor de um atributo do elemento
`counter(step)`	O valor de um contador CSS
`open-quote` / `close-quote`	Aspas adequadas ao idioma do elemento
`none` ou `normal`	Nenhum pseudo-elemento (`normal` é o padrão)

content é obrigatório. Sem ele, ::before e ::after nunca são criados, não importa quantas outras propriedades você defina.

Formas decorativas com content: ""

Com content: "", o pseudo-elemento é uma caixa vazia que você pode dimensionar e colorir. Ele é inline por padrão, e uma caixa inline ignora width e height, então dê a ele display: block, inline-block ou position: absolute:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shapes</title>
  <style>
    .status::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #16a34a;
      margin-inline-end: 8px;
    }
    .status.offline::before { background: #e5e7eb; }

    .heading::after {
      content: "";
      display: block;
      width: 48px;
      height: 4px;
      background: #2563eb;
      margin-top: 6px;
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <h2 class="heading">Section title</h2>
  <p class="status">Online</p>
  <p class="status offline">Offline</p>
</body>
</html>

Posicionar um pseudo-elemento

Para uma decoração que fica por cima ou em volta do elemento, use position: absolute no pseudo-elemento e position: relative no próprio elemento, para que os deslocamentos sejam medidos a partir dele:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline on hover</title>
  <style>
    .link {
      position: relative;
      color: #2563eb;
      text-decoration: none;
      font-size: 20px;
    }
    .link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 2px;
      background: currentColor;
      transform: scaleX(0);
      transition: transform 0.25s;
    }
    .link:hover::after { transform: scaleX(1); }

    .card { position: relative; border: 2px solid #e5e7eb; padding: 16px; margin-top: 24px; }
    .card::before {
      content: "NEW";
      position: absolute;
      top: -12px;
      right: 12px;
      background: #f59e0b;
      padding: 2px 8px;
      font-size: 12px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <a class="link" href="#">Hover this link</a>
  <div class="card">A card with a badge from ::before</div>
</body>
</html>

Repare na ordem ao combinar com uma pseudo-classe: primeiro vem o estado, depois o pseudo-elemento, .link:hover::after, nunca .link::after:hover.

attr() traz o valor de um atributo para o content, então uma única regra pode mostrar um texto diferente em cada elemento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tooltip</title>
  <style>
    [data-tip] { position: relative; border-bottom: 1px dotted #2563eb; cursor: help; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: 125%;
      left: 0;
      background: #111827;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 13px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    [data-tip]:hover::after { opacity: 1; }
    p { margin-top: 48px; }
  </style>
</head>
<body>
  <p>Hover <span data-tip="HyperText Markup Language">HTML</span> or
     <span data-tip="Cascading Style Sheets">CSS</span>.</p>
</body>
</html>

Um tooltip que só aparece no hover fica invisível para quem usa teclado ou toque. Para qualquer coisa importante, coloque o texto na página, ou mostre também no :focus com tabindex="0" no elemento.

Numerar com contadores

Os contadores CSS com ::before numeram coisas sem você digitar os números:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counters</title>
  <style>
    .steps { counter-reset: step; padding: 0; }
    .steps li { list-style: none; counter-increment: step; margin: 8px 0; }
    .steps li::before {
      content: counter(step);
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 50%;
      background: #2563eb;
      color: white;
      margin-inline-end: 8px;
    }
  </style>
</head>
<body>
  <ol class="steps">
    <li>Write the HTML</li>
    <li>Add the CSS</li>
    <li>Open it in a browser</li>
  </ol>
</body>
</html>

Acrescente ou remova um passo e os números se atualizam sozinhos.

Onde ::before e ::after não funcionam

Pseudo-elementos são inseridos dentro do elemento, entre as tags dele. Elementos sem esse "dentro" não conseguem exibi-los:

<img>, <video>, <iframe> (elementos substituídos)
<input>, <select>, <textarea> (controles de formulário) e <br>

Alguns navegadores os desenham em um checkbox ou em uma imagem quebrada, mas isso não é consistente. Coloque o pseudo-elemento em um invólucro: <span class="field"><input></span> e estilize .field::after.

Erros comuns

Sem content. O motivo mais comum de nada aparecer. Acrescente content: "".
Dimensionar um pseudo-elemento inline. width e height não fazem nada até você definir display: block, inline-block ou position: absolute.
Ordem errada com um estado. a:hover::after funciona; a::after:hover não.
Posição absoluta sem um pai posicionado. O pseudo-elemento se alinha a algum ancestral distante. Acrescente position: relative ao elemento.
Colocar conteúdo real no CSS. O texto em content não pode ser selecionado nem copiado. Deixe a informação no HTML.

Perguntas frequentes

O que o ::before faz no CSS?

Ele cria um pseudo-elemento que é o primeiro filho do elemento selecionado, preenchido com o que a propriedade content disser. O ::after faz o mesmo como último filho. Nenhum dos dois existe no HTML, então são práticos para ícones, rótulos e decorações.

Por que meu ::before ou ::after não aparece?

O motivo mais comum é a falta da propriedade content: sem ela o pseudo-elemento não é gerado. Use content: "" para uma caixa decorativa vazia. Outras causas: um pseudo-elemento inline com largura e altura (dê a ele display: block ou inline-block) ou um elemento como <img> ou <input>, que não comporta pseudo-elementos.

Qual a diferença entre :before e ::before?

Nenhuma no comportamento. ::before, com dois dois-pontos, é a sintaxe atual que marca pseudo-elementos; :before, com um só, é a grafia antiga do CSS2 que os navegadores ainda aceitam para before, after, first-line e first-letter.

Dá para usar ::before em um img ou input?

Não de forma confiável. Pseudo-elementos são inseridos dentro do conteúdo do elemento, e elementos substituídos como <img> e controles de formulário como <input> não têm uma caixa de conteúdo para eles. Envolva o elemento em um <span> ou <div> e coloque o pseudo-elemento no invólucro.

Leitores de tela leem o conteúdo do ::before?

Em geral, sim: o texto em content costuma entrar no nome acessível, mas não pode ser selecionado nem copiado. Deixe a informação real no HTML e use pseudo-elementos para decoração e pequenas pistas visuais.

Conceitos relacionados