:: antes / :: depois - CSS-Tricks

O ::beforee ::afterpseudo-elementos em CSS permite inserir conteúdo em uma página sem necessidade de estar no HTML. Embora o resultado final não esteja realmente no DOM, ele aparece na página como se estivesse e seria essencialmente assim:

div::before ( content: "before"; ) div::after ( content: "after"; )

 before after

As únicas razões para usar um em vez do outro são:

Você deseja que o conteúdo gerado venha antes do conteúdo do elemento, posicionalmente.
O ::afterconteúdo também está “depois” na ordem de origem, então ele será posicionado em cima de :: antes se empilhado um em cima do outro naturalmente.

Observe que o conteúdo ainda está dentro do elemento ao qual é aplicado. O nome parece que pode vir, sabe, antes ou depois do elemento, mas é realmente antes ou depois do outro conteúdo interno.

O valor do conteúdo pode ser:

Uma string: content: "a string"; - os caracteres especiais precisam ser codificados especialmente como uma entidade Unicode. Veja a página de glifos.
Uma imagem: content: url (/path/to/image.jpg.webp); - A imagem é inserida em suas dimensões exatas e não pode ser redimensionada. Como coisas como gradientes são, na verdade, imagens, um pseudoelemento pode ser um gradiente.
Nada: conteúdo: “”; - Útil para clearfix e inserção de imagens como imagens de fundo (definir largura e altura, e pode até redimensionar com o tamanho do fundo).
Um contador: content: counter(li); - Muito útil para estilizar listas até que: o marcador apareça.

Observe que você não pode inserir HTML (pelo menos, isso será processado como HTML). content: "";

: vs ::

Todos os navegadores que suportam a sintaxe de dois pontos duplos (: :) CSS3 também suportam apenas a sintaxe (:), mas o IE 8 só oferece suporte a dois pontos simples, então, por enquanto, é recomendado usar apenas dois pontos para melhor suporte ao navegador.

:: é o formato mais recente destinado a distinguir o pseudo conteúdo dos pseudo-seletores. Se você não precisa do suporte do IE 8, sinta-se à vontade para usar dois-pontos duplos.

Relacionado

::primeira linha
::primeira carta
Seletores de pseudo classe

Suporte para navegador

Pequenos problemas:

Firefox 3.5- não permitiria o posicionamento absoluto de pseudo elementos.
No Opera 9.2, o espaço em branco é sempre exibido dentro desse pseudoelemento como se fosse um pretexto.
O IE 8 não suporta Z-index neles