Pseudoelementos ::after y ::before en CSS

Si eres ducho o ducha en CSS, seguro que te suenan o has utilizado los pseudoelementos AFTER y BEFORE. Si no, en este artículo te contaremos un poco qué son, y qué tipo de magia puedes hacer con ellos.

Sí, has leído bien. MAGIA. Porque no hay otra forma de definir el hacer aparecer en nuestra pantalla elementos que no existen, ¿verdad?

Los pseudolementos no son algo nuevo. Llevan entre nosotr@s desde que se lanzó CSS2, allá por mayo del 98, pero cuando realmente tuvieron su boom fue hará unos 10 años, aproximadamente.

La lógica es simple. Con este selector podemos, mediante CSS, añadir contenido antes o después de cualquier elemento HTML.

Por ejemplo, si tengo una serie de divs con nombres de personas, y yo quiero añadir, delante de cada nombre, la palabra «Nombre: «:

See the Pen Before_1 by Pedro (@lopandpe) on CodePen.

Es muy sencillo. Solamente hay que añadirle al selector de CSS que queramos el pseudoselector ::before (si lo queremos antes) o ::after (si lo queremos después). ¡Sin espacios!

Como veis, el elemento que se ha creado es un contenido inline, que podemos modificar como cualquier otro elemento de html. Podemos cambiarle el color, la tipografía, el tamaño… ¡E incluso convertirlo en un contenido de bloque!

See the Pen Before_2 by Pedro (@lopandpe) on CodePen.

Aquí las opciones se disparan, y es donde estos pseudoselectores se han convertido en «mágicos». El único inconveniente es que el pseudoelemento, en CSS tiene que tener declarada la propiedad «content». Para eso se crearon, ¿no?, para añadir contenido extra. El truco es declarar esa propiedad pero dejarla vacía:

content: "";

De este modo, tendremos un <span> invisible con el que podemos hacer lo que sea.

Por ejemplo, añadir unos bullets personalizados en un listado:

See the Pen Before_3 by Pedro (@lopandpe) on CodePen.

E incluso, y aquí viene lo bueno, podemos utilizarlo para añadir degradados o capas de opacidad encima de imágenes, líneas divisorias, etc:

See the Pen GRZeRPy by Pedro (@lopandpe) on CodePen.

A recordar:

• Hay que declarar la propiedad CONTENT aunque el valor esté vacío. Si no no aparecerá el elemento.
• Si quieres utilizar un pseudoelemento como bloque, asegúrate de declarar display: block;
• Acuérdate de que para posicionar un elemento en referencia a su padre con position: absolute, es necesario que dicho padre tenga declarada su position en relative o absolute.
• En SCSS, podemos declarar los pseudolementos ::after y ::before con el símbolo &, para asegurar que en el CSS compilado no exista un espacio entre el elemento y el pseudoselector.

*imagen sacada de freepik.es