Como usar pseudo elementos CSS “:before” y “:after”

En este artículo damos a conocer los aspectos generales sobre el uso de los pseudo elementos ":before" y ":after", así como su implementación en CSS.

Si tu eres de las personas que comúnmente visita sitios de enseñanza y artículos sobre diseño web, quizás hayas notado que se han elaborado muchos tutoriales que manejan la creación de imágenes y diseños CSS mediante el uso de los pseudo elementos “:before” y “:after”.

El enfoque que se ha dado a esta temática quizás se ha producido por la flexibilidad de estos elementos y la capacidad de creación que nos ofrecen.

A lo largo de este artículo trataremos de dar a conocer y enseñar los aspectos generales sobre como utilizar dichos pseudo elementos, para que con esta información y conocimiento tengan una mejor idea de como se lograron todas esas cosas geniales que se muestran en los tutoriales.

Función de un pseudo elemento CSS

Primero que nada tenemos que aclarar que “:before” y “:after” no son los únicos pseudo elementos que existen, la lista completa abarca a “:first-letter”, “:first-line”, “:before”, “:after” y “::selection”, pero como en esta ocasión nos estamos enfocado únicamente a los dos ya mencionados, cada vez que nos refiramos con el termino “pseudo elemento” nos enfocaremos a “:after” y “:before”.

La creación de estos elementos no cambia nada en el documento, sólo se incluyen para obtener cambios que sean visibles para el usuario. Dichos elementos nuevos son capaces de recibir un estilo CSS por lo que fueron aprovechados para hacer trazos sobre los elementos del sitio.

Codificación de los pseudo elementos CSS

La codificación de los pseudo elementos es bastante sencilla de realizar, basta con recordar dos sencillos aspectos para crearlos de manera correcta.

Primero debemos crear un selector que indique a que elemento le vamos a crear pseudo elementos, es decir tenemos que definir en que parte del documento se añadirán los elementos falsos que utilizaremos. Por ejemplo si quisieramos crear un pseudo elemento que se encuentre antes de un div identificado como “icono” entonces la sintaxis de mi selector quedaría así “#icono:before”.

Si omitimos darle un elemento antes de llamar a “:after” o “:before”, la sentencia funcionará pero no nos servirá de mucho, al menos de que desees que se inserte algún tipo de contenido antes o después de cada elemento que compone el DOM de tu sitio.

El segundo aspecto a considerar es la propiedad “content”, toda declaración de pseudo elemento debe tener dicha propiedad CSS si quiere que su creación surja efecto, ya que sin ella no podremos insertar nada en los pseudo elementos que se crearon. En pocas palabras “content”, como su nombre lo indica, es la encargada de portar el nuevo contenido.

Se puede presentar el caso en que no se necesite contenido, en estas ocasiones puedes utilizar la propiedad “content” vacía, pero por ningún motivo la debes de quitar. Este caso se puede presentar cuando utilizamos cajas vacías a las que únicamente agregamos estilos.

Una vez analizados estos dos aspectos, podemos definir que nuestra sintaxis básica quedará de esta manera:

#icono:before {
   content: "Hola";
}

#icono:after {
   content: "Mundo";
}

Con este código insertaremos un “Hola” antes del div “icono” y un “Mundo” después.

Contenido insertado

El contenido que se inserta mediante pseudo elementos únicamente será visible en el código CSS y por defecto este se inserta con un estilo “inline”, es por ello que si queremos mostrar el contenido de manera correcta muchas veces tenemos que recurrir a propiedades CSS.

El uso de la propiedad “display” con un valor de “block” es muy común al momento de manejar pseudo elementos, esta propiedad nos permite mostrar al elemento con un bloque y darle una altura y anchura personalizada.

Colocación del contenido

Quizás si tomamos un concepto muy literal de lo que significa cada pseudo elemento, nuestra mente imagine que el contenido agregado se colocará arriba y abajo del elemento definido por el selector.

Esto es común de pensar pues nosotros examinamos a una página web como algo plano bidimensional donde el antes significa arriba y el después significa abajo.

Pero en esta ocasión, con el manejo de pseudo elementos, tenemos que imaginar a estas nuevas partes como hijos del elemento que se indico en el selector. Hijos cuyo contenido será insertado antes o después del contenido propio del elemento padre.

Tipos de Contenido

Como ya se pudo apreciar en el ejemplo que se dio anteriormente el contenido puede ser de tipo texto, pero qué hay de otros tipos, qué tenemos que hacer para insertar por ejemplo una imagen, es básicamente lo mismo sólo con pequeñas diferencias.

Si queremos plasmar una imagen en un pseudo elemento creado antes de un párrafo haríamos algo como esto:

p:before {
 content: url(imagen.jpg);
}

Como se puede apreciar únicamente cambiamos el valor de la propiedad content por una URL de imagen y removimos las comillas para que no se piense que es una cadena de texto.

Soporte en navegadores

Como punto final para este artículo quiero mencionar que los pseudo elementos son soportados en la actualidad por casi todos los navegadores, Chrome, Firefox, Safari, Opera e Internet Explorer desde su versión 8 aunque con algunos bugs.