:: antes / :: después - Trucos CSS

El ::beforey ::afterpseudo-elementos de CSS le permite insertar contenido en una página sin necesidad de que sea en el código HTML. Si bien el resultado final no está realmente en el DOM, aparece en la página como si lo estuviera, y esencialmente sería así:

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

 before after

Las únicas razones para usar una sobre la otra son:

Desea que el contenido generado esté antes que el contenido del elemento, posicionalmente.
El ::aftercontenido también está "después" en el orden de origen, por lo que se colocará encima de :: before si se apilan uno encima del otro de forma natural.

Tenga en cuenta que el contenido todavía está dentro del elemento al que se aplica. El nombre se siente como si vinieran, ya sabes, antes o después del elemento, pero en realidad es antes o después del otro contenido dentro.

El valor del contenido puede ser:

Una cadena: content: "a string"; - los caracteres especiales deben codificarse especialmente como una entidad Unicode. Vea la página de glifos.
Una imagen: contenido: url (/ruta/a/imagen.jpg.webp); - La imagen se inserta en sus dimensiones exactas y no se puede cambiar de tamaño. Dado que cosas como los degradados son en realidad imágenes, un pseudo elemento puede ser un degradado.
Nada: contenido: “”; - Útil para borrar e insertar imágenes como imágenes de fondo (establecer ancho y alto, e incluso puede cambiar el tamaño con el tamaño de fondo).
Un contador: content: counter(li); - Realmente útil para diseñar listas hasta que aparezca el marcador.

Tenga en cuenta que no puede insertar HTML (al menos, se representará como HTML). content: "";

: vs ::

Todos los navegadores que admiten la sintaxis de dos puntos dobles (: :) CSS3 también admiten solo la sintaxis (:), pero IE 8 solo admite dos puntos simples, por lo que, por ahora, se recomienda usar dos puntos simples para obtener la mejor compatibilidad con el navegador.

:: es el formato más nuevo destinado a distinguir el pseudo contenido de los pseudo-selectores. Si no necesita compatibilidad con IE 8, no dude en utilizar dos puntos.

Relacionado

::primera linea
::primera letra
Selectores de pseudo clases

Soporte del navegador

Pequeños problemas:

Firefox 3.5- no permitiría el posicionamiento absoluto de pseudo elementos.
En Opera 9.2, los espacios en blanco siempre se muestran dentro de este pseudoelemento como si fuera pretexto.
IE 8 no admite el índice z en ellos