We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,