CSS ::after Pseudo-Elemento

O pseudo-elemento CSS ::after cria um elemento extra que é inserido como o último filho do elemento correspondente, logo após o seu conteúdo real. Você não precisa adicionar nenhuma marcação ao HTML — o navegador gera o elemento a partir da sua folha de estilos. Esta página explica o que é o ::after, como funciona a propriedade obrigatória content, os cuidados a ter e os padrões em que ele é genuinamente útil.

O que é o `::after`

O ::after permite que você adicione conteúdo gerado — caracteres, strings de texto, uma imagem ou uma forma decorativa — ao final de um elemento sem tocar no HTML do documento. Como a caixa gerada faz parte do elemento, você pode animá-la, posicioná-la ou usá-la como float como qualquer conteúdo normal.

Duas regras são essenciais:

A propriedade content é obrigatória. Se você omitir content, o pseudo-elemento nunca será criado. Use content: "" (uma string vazia) quando quiser apenas uma caixa decorativa, sem texto.
Por padrão, a caixa é inline. Defina display: block (ou inline-block) se precisar que largura, altura ou margens verticais tenham efeito.

`::after` vs `:after`

O ::after também pode ser escrito com a notação de dois pontos simples :after. A forma com dois dois-pontos é o padrão moderno do CSS3 para pseudo-elementos (para distingui-los das pseudo-classes como :hover); a forma com um único dois-pontos existe apenas para compatibilidade com navegadores antigos. Prefira ::after a menos que precise dar suporte a engines legadas como o Internet Explorer 8.

`::after` vs `::before`

O pseudo-elemento ::before insere conteúdo gerado antes do conteúdo do elemento, enquanto o ::after o insere depois. Eles são, de resto, idênticos e frequentemente usados juntos — por exemplo, ::before e ::after são a forma clássica de adicionar aspas de abertura e fechamento ou colchetes decorativos correspondentes ao redor de um título.

Aviso

O conteúdo gerado não faz parte do DOM: ele não pode ser selecionado pelo usuário, e a maioria dos leitores de tela o ignora (o suporte é inconsistente entre os navegadores). Use ::after apenas para conteúdo puramente decorativo ou complementar — nunca coloque em content um significado que o usuário precise ler.

Informação

Os pseudo-elementos criados com ::after e ::before não se aplicam a elementos substituídos, como <img> e <br>, porque esses elementos não possuem conteúdo de documento ao redor do qual inserir conteúdo.

Versão

CSS Pseudo-Elements Level 4

Selectors Level 3

Sintaxe

Pseudo-Elemento CSS ::after

::after {
  css declarations;
}

Exemplo do pseudo-elemento `::after`:

Exemplo do CSS ::after

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::after { 
        content: " - William Shakespeare.";
      }
    </style>
  </head>
  <body>
    <h2>::after selector example</h2>
    <p>"Be or not to be"</p>
  </body>
</html>

Experimente Você Mesmo »

No exemplo a seguir, estilos podem ser aplicados ao conteúdo.

Exemplo do pseudo-elemento `::after` com conteúdo estilizado:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::after { 
        content: " - William Shakespeare.";
        background-color: #eee;
        color: #1c87c9;
        padding: 5px 3px;
        border: 2px dashed #000;
        margin-left: 5px;
      }
    </style>
  </head>
  <body>
    <h2>::after selector example</h2>
    <p>"Be or not to be"</p>
  </body>
</html>

Experimente Você Mesmo »

Casos de uso comuns

O ::after é ideal quando você quer conteúdo visual extra sem poluir sua marcação:

Formas decorativas e divisores. Uma caixa construída com content: "" mais um border ou background — sublinhados, setas, faixas, caudas de tooltip.
Ícones após links. Adicione uma seta de link externo ou um marcador de tipo de arquivo após um <a>.
O hack clearfix. Força um elemento pai a conter seus filhos com float.

/* External-link arrow after every link with target="_blank" */
a[target="_blank"]::after {
  content: " ↗";
}

/* Clearfix: make a container wrap its floated children */
.clearfix::after {
  content: "";
  display: block;   /* block + clear pushes the box below the floats */
  clear: both;
}

Note o content: "" vazio no clearfix: ele cria a caixa sem nenhum texto visível, que é exatamente o que você precisa para um auxiliar de layout.

Dicas e cuidados

Sem content, sem elemento. Esquecer a propriedade content é o motivo mais comum para uma regra ::after "não fazer nada."
Defina display para dimensionamento. Um pseudo-elemento inline ignora width, height e margens superior/inferior. Use display: block ou inline-block.
Higiene com aspas. Dentro de strings em content, escape caracteres especiais com seu código Unicode (ex.: content: "\00BB" para ») para que a codificação do arquivo não os quebre.

Prática

O que o pseudo-elemento ::after em CSS faz?

Ele insere conteúdo antes do elemento selecionado.Ele insere conteúdo após o elemento selecionado.Ele permite estilizar o texto selecionado.Ele é usado em conjunto com a propriedade content.

O que é o ::after

::after vs :after

::after vs ::before