:after | ::after

Resumo

:after cria um pseudo-elemento que é a última criança do elemento selecionado. Tipicamente usado para adicionar conteúdo cosmético a um elemento, pelo uso da propriedade CSS content. Este elemento é inline por padrão.

Firefox 3.5 note

A versão do Firefox anterior à 3.5 somente tinha implementada a propriedade :after do CSS 2.0. Não foram permitidas position, float, list-style-* e algumas propriedades de exibição. O Firefox 3.5 removeu estas restrições. Note que isto independe da notação com :: mencionada anteriormente.

Sintaxe

element:after  { propriedades do estilo }  /* sintaxe CSS2 */

element::after { propriedades do estilo }  /* sintaxe CSS3, não suportada pelo IE8 */

A notação ::after foi introduzida no CSS3 com o objetivo de estabelecer uma diferença entre pseudo-classes e pseudo-elementos. Navegadores também aceitam a notação :after introduzida no CSS 2.

Nota:  O Microsoft Internet Explorer 8 suporta somente a notação :after.

Exemplos

.boringtext:after {
   content:    " Obrigado por ler tudo isto!"; 
   font-size:  small; 
   color:      red;
   background: gray; 
}

Especificações

Compatibilidade com navegadores

Navegador Versão mais antiga Suporte a
Internet Explorer 8.0 :after
Firefox (Gecko) 1.0 (1.0) :after
1.0 (1.5) :after | ::after
Opera 4.0 :after
7.0 :after | ::after
Safari (WebKit) 1.0 (85) :after | ::after

Veja também

:before, content