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.
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
- CSS 2.1 Generated Content (EN)
- CSS 2.1 Selectors (EN)
- CSS 3 Selectors (EN) Rascunho em produção
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 |