Cómo utilizar CSS Before After para mejorar el diseño de tu sitio web
After y Before son dos pseudo-elementos de CSS que deberías tener muy presentes a la hora de diseñar una página web. Nos ofrecen una manera de conseguir efectos y trucos atractivos, algunos de los cuales vamos a abordar en este artículo. Pero antes, por si acaso alguien no los conoce todavía, veamos una breve explicación para entender su funcionamiento.
- ¿Qué son los pseudo-elementos before y after en CSS?
- Beneficios de usar before y after en CSS para el diseño web
- Cómo aplicar Before y After en CSS para mejorar la apariencia de tus páginas web
- Cómo utilizar los pseudo-elementos After y Before en CSS
- Ejemplos de cómo crear efectos con pseudo-elementos CSS
- Mejores prácticas para usar before y after CSS en tu sitio web
- Conclusiones sobre After y Before CSS
¿Qué son los pseudo-elementos before y after en CSS?
Los pseudo-elementos ::before y ::after en CSS permiten insertar contenido visual antes o después de un elemento HTML, sin necesidad de modificar el marcado original. Se utilizan comúnmente para añadir detalles decorativos, iconos, efectos visuales o textos auxiliares sin alterar la estructura del documento.
Funcionan creando elementos virtuales dentro del flujo del CSS. Para usarlos, se necesita obligatoriamente definir la propiedad content, aunque sea vacía (''), y después se pueden aplicar estilos como color, tamaño, posición, bordes, etc.
Ejemplo básico:
h2::before { content: «★ «; color: gold; }
Beneficios de usar before y after en CSS para el diseño web
El uso de ::before y ::after va más allá de lo estético: ofrece ventajas funcionales que ayudan a mantener un diseño más limpio y eficiente. Estos son algunos de sus principales beneficios:
Añadir elementos decorativos sin HTML adicional
Con estos pseudo-elementos puedes incluir íconos, líneas, flechas o efectos visuales sin necesidad de añadir etiquetas HTML extra. Esto reduce la complejidad del DOM y mejora el rendimiento de la página, además de mantener el HTML más limpio y enfocado en la estructura del contenido.
Por ejemplo, puedes personalizar una lista sin alterar su HTML:
li::before { content: «✔»; color: green; margin-right: 5px; }
Mejorar la experiencia visual del usuario
Gracias a before y after, es posible crear elementos interactivos como tooltips, etiquetas, sombras o efectos hover, que enriquecen la experiencia del usuario sin cargar la página con más scripts o librerías.
Estos pequeños detalles ayudan a guiar al usuario, mejorar la estética del diseño y reforzar la jerarquía visual del contenido.
Optimizar la estructura del código CSS
El uso de pseudo-elementos fomenta la separación de contenido y presentación, uno de los principios fundamentales del desarrollo web. En lugar de incluir contenido decorativo en HTML o JavaScript, se centraliza en CSS, facilitando la reutilización de estilos y el mantenimiento del código a largo plazo.
Cómo aplicar Before y After en CSS para mejorar la apariencia de tus páginas web
La clave para usar ::before y ::after de forma efectiva es comprender qué elementos visuales se pueden automatizar y qué tipo de contenido aporta valor sin necesidad de estar directamente en el HTML.
Algunos usos comunes para mejorar la apariencia de una web son:
- Crear subrayados animados o efectos hover sin JavaScript.
- Añadir líneas divisorias o detalles gráficos en tarjetas o cajas.
- Insertar textos auxiliares (como “nuevo” o “beta”) en botones o productos.
- Diseñar tooltip flotantes sobre botones, iconos o enlaces.
Todo esto se puede aplicar desde tu propio servidor web o VPS, como los que ofrece Arsys, cargando tus hojas de estilo personalizadas y manteniendo tu web ligera y rápida.
Cómo utilizar los pseudo-elementos After y Before en CSS
Se llaman pseudo-elementos porque permiten insertar contenido en la página, como si fueran elementos del propio HTML. Para usarlos, colocamos el selector de CSS correspondiente, seguido de «::after» o «::before». A continuación, podemos asignar un contenido con la propiedad content, de esta manera.
.miclase::after {
content: «Contenido insertado con CSS»;
}
Gracias a esa regla de CSS, después de los elementos de la clase «miclase», se colocará el texto «Contenido insertado con CSS».
El pseudo-elemento «::before» funciona exactamente igual, solo que el contenido se inserta antes. El contenido siempre se coloca «inline», pero podemos cambiar el CSS para que se comporte como un elemento de bloque. Para ello simplemente podemos colocar el atributo display dentro del pseudo-elemento que deseemos
Como ejemplo, podemos ver el siguiente código.
.miclase {
background-color: aquamarine;
padding: 15px;
}
.miclase::after {
content: «Contenido insertado con CSS»;
display: block;
}
.miclase::before {
content: «Contenido insertado antes…»;
}
Con un HTML como el siguiente:
Este contenido está en el propio HTML.
Obtendremos un resultado como el de la imagen:
Nota: La sintaxis para indicar los pseudo-elementos requiere el uso de «::» (dos puntos dobles). Sin embargo, en navegadores web muy antiguos se usaba solamente «:». Por ello, los navegadores siguen aceptando usar «:» en vez de «::», por compatibilidad hacia atrás.
Ahora, vamos a ver un par de trucos interesantes para ilustrar la utilidad de estos pseudo-elementos.
Ejemplos de cómo crear efectos con pseudo-elementos CSS
Crear una lista con un Bullet Point personalizado con Before CSS
¿Alguna vez has pensado en alterar la bolita que hay antes de cada elemento de una lista? Seguro que sí y que has usado imágenes para conseguirlo, ya sea como contenido en la propia lista o mediante el uso de fondos de imagen.
Sin embargo, también podemos conseguir efectos interesantes gracias a las formas CSS y el pseudo-elemento before.
Por ejemplo, veamos el siguiente código:
.milista li {
margin-bottom: 9px;
list-style-type: none;
}
.milista li::before {
display: inline-block;
content:»;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent #007bff;
margin-right: 10px;
}
En este caso, estamos modificando los elementos de la lista para incluir, antes de ellos, un triángulo a modo de bullet. El resultado sobre la lista lo podemos ver a continuación.
Crear un Tooltip con After CSS
Existen multitud de formas de realizar un tooltip, aunque la mayoría requieren usar algo de JavaScript. Con una técnica basada en pseudo-elementos, podemos construir una interfaz de tooltip sin necesidad de código JavaScript y prácticamente sin usar marcado adicional.
Para ello, tenemos que conocer nuevas habilidades que no hemos comentado todavía. La más importante es la de usar contenido personalizable dentro de los pseudo-elementos, algo que podemos conseguir con un atributo «data«. Comenzamos viendo el marcado de nuestro ejemplo, para localizar el atributo que nos permitirá definir el contenido del tooltip.
[…] adipisicing elit. Praesentium fuga, provident quos libero […]
Como puedes ver, hemos englobado las palabras «Praesentium fuga» dentro de una etiqueta . Esa etiqueta tiene un atributo «data-content», en el que hemos colocado el texto que aparecerá en el tooltip. Ahora podemos usar ese texto dentro de un pseudo-elemento, tal como podemos ver en el atributo «content» de nuestras reglas CSS.
.tooltip {
color: orange;
display: inline-block;
position: relative;
}
.tooltip::after {
content: attr(data-content);
position: absolute;
bottom: 100%;
left: -50%;
background: #a6e4f3;
padding: 5px 15px;
color: #303030;
border-radius: 10px;
white-space: nowrap;
opacity: 0;
}
.tooltip:hover::after {
opacity: 1;
}
Ten en cuenta que el tooltip debe estar oculto de manera predeterminada. Solamente con un hover que se tiene que mostrar al usuario, por eso se usa el atributo opacity.
Nuestra interfaz lucirá de la manera que aparece en la siguiente imagen.
Además, con un poco más de CSS conseguirías una animación en la opacidad para conseguir un efecto más atractivo. Incluso podrías animar las propiedades bottom o left para conseguir que el tooltip se entrase y saliese de manera animada. Con estas pequeñas consideraciones, el código sería el siguiente:
.tooltip {
color: orange;
display: inline-block;
position: relative;
}
.tooltip::after {
content: attr(data-content);
position: absolute;
bottom: 130%;
left: -50%;
background: #a6e4f3;
padding: 5px 15px;
color: #303030;
border-radius: 10px;
white-space: nowrap;
opacity: 0;
transition: all 0.5s ease;
}
.tooltip:hover::after {
opacity: 1;
bottom: 100%;
}
Mejores prácticas para usar before y after CSS en tu sitio web
Usar ::before y ::after correctamente requiere seguir ciertas buenas prácticas que aseguren un diseño visualmente consistente y bien optimizado.
Mantener la coherencia visual en todos los dispositivos
Los pseudo-elementos ::before y ::after permiten crear efectos visuales potentes, pero deben integrarse de forma consistente en todos los dispositivos y tamaños de pantalla. Una de las claves para lograrlo es aplicar medidas relativas (como em, %, vw/vh) en lugar de píxeles fijos, y asegurarte de que estos elementos se escalen correctamente con el contenido.
Por ejemplo:
.button::after { content: »; display: block; height: 0.2em; width: 100%; background-color: #2196F3; }
Además, debes utilizar media queries para ajustar o incluso ocultar estos elementos en pantallas pequeñas, si afectan a la usabilidad. No todos los efectos decorativos se ven bien en móviles, donde el espacio visual es limitado.
@media (max-width: 600px) { .button::after { display: none; } }
Realizar pruebas en múltiples resoluciones y navegadores garantiza una apariencia profesional y uniforme, especialmente en sitios publicados desde un hosting o VPS como los de Arsys, donde el rendimiento y la accesibilidad son esenciales
Evitar sobrecargar el CSS con elementos innecesarios
Uno de los errores comunes al trabajar con ::before y ::after es usarlos en exceso o sin un propósito claro. Aunque pueden parecer ligeros, cada pseudo-elemento es una caja renderizada más en el navegador, y cuando se combinan con animaciones, sombras o imágenes de fondo, pueden impactar negativamente en el rendimiento, especialmente en sitios con mucho tráfico.
Por eso, es buena práctica:
- Usar pseudo-elementos solo cuando aportan valor visual real.
- Evitar repetir estilos innecesarios que podrían resolverse con clases reutilizables.
- No usar
::beforeo::afterpara insertar iconos si ya estás usando una librería como Font Awesome o SVG embebidos correctamente.
Un código limpio y enfocado mejora la mantenibilidad del sitio, reduce el tiempo de carga y facilita futuras actualizaciones. Esto es especialmente relevante en proyectos desplegados en entornos de producción o servidores profesionales.
Usar estos pseudoelementos para mejorar, no reemplazar
Los pseudo-elementos deben entenderse como elementos decorativos o de apoyo visual, no como sustitutos de contenido real. Insertar información clave (como mensajes de error, precios o texto que deba leerse por lectores de pantalla) en un ::before o ::after no es accesible y puede comprometer la usabilidad.
Por ejemplo, esto no sería accesible:
input:invalid::after { content: «Campo obligatorio»; color: red; }
Aunque visualmente puede funcionar, este mensaje no será leído por tecnologías de asistencia. En su lugar, el contenido importante debería estar en el HTML real con el apoyo de aria-* o etiquetas visibles para todos los usuarios.
En cambio, lo adecuado es usar estos pseudo-elementos para:
- Añadir detalles gráficos (íconos, líneas, flechas).
- Crear efectos de transición o animación suaves.
- Simular decoraciones como etiquetas o cintillos sin modificar el HTML.
La clave es mejorar la experiencia visual sin comprometer la accesibilidad, el SEO ni la semántica del contenido.
Conclusiones sobre After y Before CSS
Se recomienda entender y saber cómo aprovechar todas las capacidades que nos ofrece CSS para poder personalizar los elementos visuales de nuestra página web. Además, al seguir explorando las posibilidades que nos ofrecen los pseudo-elementos CSS, podremos encontrar la forma de cómo renovar la presentación de nuestro contenido sin alterar la estructura HTML.
Aplicar estos elementos visuales mediante pseudo-elementos CSS no sólo mejora la experiencia de usuario, sino que también vamos a poder diferenciar nuestra marca de la competencia y potenciar nuestra identidad visual. Ahora bien, si quieres ir un paso más allá con respecto al diseño, te recomendamos que optes además por un dominio personalizado y un hosting web confiable para que puedas asegurar la accesibilidad y estabilidad de tu página web.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.