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 |