Pseudo-elementos ::before y ::after de CSS
Explicación y ejemplos de pseudo-elementos ::before y ::after en CSS.
En CSS se pueden añadir palabras clave a los selectores que permiten estilizar elementos del documento HTML que no existen físicamente en el DOM. Es por ello que se llaman ‘pseudo’ porque son añadidos virtualmente.
Existe una lista extensa de estos pseudo-elementos, pero en este artículo nos centraremos en dos: ::before y ::after. Estos elementos son muy potentes y permiten lograr efectos visuales sorprendentes con CSS, que de otro modo solo podríamos replicar con imágenes.
Pseudo-elemento Before
El pseudo-elemento ::before permite insertar contenido antes del contenido real de un elemento HTML seleccionado.
Por defecto, tiene un comportamiento de visualización en línea (inline) y requiere la propiedad content en CSS para que funcione correctamente. A continuación, se muestra un ejemplo de sintaxis:
p::before { content: "Nota: "; font-weight: bold; color: red;}En este caso, antes del contenido de cada párrafo <p> aparecerá la palabra “Nota:” en negrita y de color rojo.
Pseudo-elemento After
El pseudo-elemento ::after funciona de manera similar a ::before, con la diferencia de que el contenido se inserta después del contenido real del elemento seleccionado.
Al igual que ::before, ::after tiene un comportamiento en línea por defecto y necesita la propiedad content para mostrarse correctamente. Veamos un ejemplo:
p::after { content: " ✔"; color: green;}En este caso, después del contenido de cada párrafo <p> se añadirá un icono de verificación (✔) de color verde.
Ejemplo avanzado
Existe infinidad de posibilidades con estas dos propiedades, veamos un ejemplo práctico abanzao de cómo ::before y ::after nos pueden ayudar a hacer un borde redondeado cortado:
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Borde circular con pseudo-elementos ::before & ::after</title> <style> .box { position: relative; width: 100px; height: 100px; }
.box::before { content: ""; position: absolute; top: 0; left: 0px; width: 20px; height: 20px; border-top-left-radius: 10px; border-top-right-radius: 0; border: solid 1px black; border-right: none; border-bottom: none; }
.box::after { content: ""; position: absolute; top: 0; right: 0px; width: 20px; height: 20px; border-top-left-radius: 0; border-top-right-radius: 10px; border: solid 1px black; border-left: none; border-bottom: none; }
.inner-box::before { content: ""; position: absolute; bottom: 0; left: 0px; width: 20px; height: 20px; border-bottom-left-radius: 10px; border-top-right-radius: 0; border: solid 1px black; border-right: none; border-top: none; }
.inner-box::after { content: ""; position: absolute; bottom: 0; right: 0px; width: 20px; height: 20px; border-bottom-left-radius: 0; border-bottom-right-radius: 10px; border: solid 1px black; border-left: none; border-top: none; } </style></head>
<body> <div class="box"> <div class="inner-box"></div> </div></body>
</html>Conclusión
Los pseudo-elementos ::before y ::after son herramientas esenciales en CSS que permiten mejorar el diseño web sin modificar el HTML. Con ellos, podemos añadir contenido decorativo, mejorar la accesibilidad y lograr efectos visuales sin necesidad de imágenes adicionales.