que hace :: antes realmente?

Entonces leo los documentos y probablemente entiendo el propósito de ::before y ::after . Si mi comprensión es correcta, siempre deberían funcionar en combinación con otros elementos. Pero la página web que estoy viendo tiene algo como esto:

  
::before
...
::after

No puedo entender qué hacen ::before y ::after aquí?

::before y ::after refieren a los pseudo-elementos CSS que se crean antes y después de los elementos coincidentes.

Los pseudo-elementos generalmente no se muestran en los árboles de elementos HTML. Sin embargo, si está utilizando el tipo correcto de una herramienta de depuración (como el inspector de Chrome) puede ver estos elementos especiales. Como hoy en día es muy común para diseñar una página usando pseudo-selectores, es muy útil contar con una herramienta de depuración que pueda mostrarlos.

Para verificar este comportamiento desde su inspector de Chrome (u otra herramienta capaz), intente agregar algo de contenido a algunos de esos pseudo-elementos con CSS, por ejemplo:

 h1:before { content: 'before'; } 

Supongo que está viendo eso, porque el inspector de Chrome lo muestra para su inspección: http://www.youtube.com/watch?v=AcKlJbmuxKo

En realidad, no están en el html original servido desde el servidor, pero solo lo ha agregado Chrome Inspector.

Puede usarlos para ver su modelo de caja en la pantalla y los estilos declarados para ellos.

También verifique esto: https://stackoverflow.com/a/19978698/774086

::before y ::after son pseudoelementos como se puede ver en este ejemplo:

CSS:

 .container-fluid>p::before{ content: "HI"; } .container-fluid>p::after{ content: "Bee"; } 

http://jsfiddle.net/vX2jW/ Puedes leer más aquí: http://css-tricks.com/almanac/selectors/a/after-and-before/