CSS ::before y ::after los amigos que quieres conocer

 Por lo general, cuando estamos haciendo frontend y necesitamos agregar un elemento parecido a esto:

 Se nos ocurre que con simplemente agregar una etiqueta de span con una clase y darle los estilos que necesitamos ya estamos listos. Pero a veces no tenemos la posibilidad de agregar nuevas etiquetas o enmarcado HTML sobre lo que estamos trabajando, puede que estemos trabajando en Drupal y agregar esa nueva etiqueta puede ser mas laborioso de lo que parece, entonces es momento que conozcas a ::before y ::after. ::before y ::after son pseudo-elementos usados para dar estilos a partes específicas de un elemento y en combinación con la propiedad de content de CSS, serán un poderosa herramienta para dar toques profesionales a tus estilos de CSS y tendrás una herramienta útil bajo la manga.

Ahora veamos a nuestros amigos en acción

Como su nombre lo indica ::before agrega un elemento nuevo antes del elemento sobre el que se esta aplicando, ::after hace lo mismo solo que lo agrega luego de dicho elemento. Es importante tener en cuenta que solo se puede usar ::before y ::after una sola vez por elemento. Así podemos hacer cosas como: h1::before { content: url(smiley.gif); // agrega una imagen antes del h1 }

Podemos ir un poco más allá y hacer lo siguiente: h1 ::before { content: ''; background-color: #64b8dd; display: inline-block; height: 20px; padding-right: 5px; width: 20px; } Con esto agregamos un cuadrado con un fondo azul y un poco de padding derecho para que no se vea pegado al texto de la etiqueta h1. Estos pseudo-elementos pueden ser tratados como un elemento cualquiera de HTML al que podemos agregarle propiedades de background, position, display, en el contenido también podemos usar fuentes para agregar iconos así como content: "\2713"; que teniendo la fuente “Roboto” renderizará el icono de un gancho. De esta forma obtenemos los resultados que búscamos para reproducir la imagen antes propuesta.

Las desventajas de usar ::before y ::after es que no son soportados por navegadores viejos

Lista de navegadores que lo soportan:

 Antes de que vayas a aplicar ::before y ::after a todos los elementos que quieras, hay elementos sobre los que no sirven, estos son los Elementos Reemplazados, que son elementos cuyas dimensiones y apariencia son determinadas por agentes externos. Los pseudo-elementos no se aplican a ellos porque puede que no tengan “contenido” por ellos mismos, o son reemplazados por algo, como la interfaz del usuario. Algunos de ellos son: img, iframe, br, hr, object, textarea, input, select, video, audio, canvas.

Otra cosa a mencionar es que la notación ::before o ::after fue introducida en CSS3 para establecer una distinción entre pseudo-clases y pseudo-elementos. Los navegadores también aceptan la notación :before o :after que es usada en CSS2. Con esto en cuenta ya puedes comenzar a agregar mas sabor a tus estilos y afrontar nuevos retos. Ahora tienes una nueva técnica y un nuevo mundo de opciones que antes parecían un poco mas difíciles.

Te recomendamos en video