Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Em CSS, ::after cria um pseudo-elemento que é o último filho do elemento selecionado. Muitas vezes é usado para adicionar e melhorar o conteúdo de um elemento como a propriedade content. É inline por padrão.

/* Adiciona uma seta após os links */
a::after {
  content: "";
}

Sintaxe

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

O CSS3 introduziu a notação ::after (com dois sinais de dois pontos) para distinguir pseudo-classes dos pseudo-elementos. Os navegadores também aceitam :after, introduzido no CSS2.

Exemplos

Uso simples

Vamos criar duas classes: uma para parágrafos tediosos e uma para parágrafos excitantes. Podemos então marcar cada parágrafo adicionando um pseudo-elemento ao final dele.

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.
Just hit the edit button to add new live samples, or improve existing samples.</p>
.exciting-text::after {
  content: "<- now this *is* exciting!"; 
  color: green;
}

.boring-text::after {
   content: "<- BORING!";
   color: red;
}

Visualização

Exemplos decorativos

Podemos estilizar textos ou imagens na propriedade content praticamente de qualquer forma que quisermos.

<span class="ribbon">Observe onde a caixa de laranja está.</span>
.ribbon {
  background-color: #5BC8F7;
}

.ribbon::after {
  content: "Observe esta caixa laranja";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}

Visualização

Dicas

O exemplo a seguir mostra o uso do ::after pseudo-elemento em conjunto com a expressão CSS attr() e um tributo data personalizado data-descr para criar uma dica em forma de glossário feito em CSS puro. Verifique a visualização abaixo, ou veja este exemplo em página separada.

<p>Aqui está o exemplo ao vivo do código acima.<br />
  Temos um pouco de <span data-descr="collection of words and punctuation">texto</span> aqui com algumas 
  <span data-descr="small popups which also hide again">dicas</span>.<br />
  Não seja tímido, passe o mouse por cima para dar uma <span data-descr="not to be taken literally">olhada</span>.
</p>
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00F;
  cursor: help;
}

span[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}

Visualização

Especificações

Especificação Status Comentário
CSS Pseudo-Elements Level 4
The definition of '::after' in that specification.
Rascunho atual Sem mudanças significativas em relação à especificação anterior.
CSS Transitions
The definition of 'transitions on pseudo-element properties' in that specification.
Rascunho atual Permite transições em propriedades definidas em pseudo-elementos.
CSS Animations
The definition of 'animations on pseudo-element properties' in that specification.
Rascunho atual Permite animações em propriedades definidas em pseudo-elementos.
Selectors Level 3
The definition of '::after' in that specification.
Recomendação Introduz a sintaxe de dois sinais de dois pontos.
CSS Level 2 (Revision 1)
The definition of '::after' in that specification.
Recomendação Definição inicial, usando a sintaxe de um sinal de dois pontos.

Compatibilidade entre navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Recurso Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte ao :after (Yes) (Yes) 1.0 (1.7 or earlier)[1] 8.0 4 4.0
Suporte ao ::after (Yes) (Yes) 1.5 (1.8)[1] 9.0 7 4.0
Suporte à animações e transições 26 (Yes) 4.0 (2.0) Não suportado Não suportado Não suportado
Recurso Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte ao :after (Yes) (Yes) ? ? ? ?
Suporte ao ::after (Yes) (Yes) ? ? ? ?
Suporte à animações e transições (Yes) (Yes) 4.0 (4.0) Não suportado Não suportado Não suportado

[1] O Firefox anterior à versão 3.5 implementou apenas a versão CSS 2.0 de :after. Não foram permitidos position, float, list-style-* e algumas propriedades exibição. O Firefox 3.5 removeu estas restrições.

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: flunardelli, filipetorres, MarcosFerrao
Última atualização por: flunardelli,