DOMINANDO ::BEFORE Y ::AFTER EN CSS: USO DE LA PROPIEDAD CONTENT

Introducción al uso de pseudo-elementos ::before y ::after con la propiedad content

Los pseudo-elementos ::before y ::after representan una herramienta poderosa en el desarrollo front-end moderno. Estos permiten insertar contenido generado directamente desde CSS antes o después del contenido principal de un elemento, sin necesidad de alterar la estructura HTML. La propiedad content juega un rol central en este proceso, ya que define qué se inserta en dichos pseudo-elementos. En el contexto actual del desarrollo web en 2026, donde el rendimiento y la mantenibilidad del código son prioridades, dominar estas técnicas resulta esencial para crear interfaces limpias y eficientes.

Esta guía profundiza en los valores aceptados por la propiedad content, sus aplicaciones prácticas y consideraciones importantes. Se incluyen ejemplos detallados que ilustran cómo implementar estas funcionalidades en proyectos reales de programación y tecnología.

Valores aceptados por la propiedad content

La propiedad content acepta una variedad de valores que determinan el tipo de contenido generado en los pseudo-elementos. Entender estos valores es fundamental para aprovechar al máximo las capacidades de ::before y ::after.

Entre los valores principales se encuentran normal, que es el predeterminado y se computa como none en pseudo-elementos; none, que impide la generación del pseudo-elemento; cadenas de texto entre comillas; imágenes mediante url() o gradientes; valores relacionados con comillas como open-quote o close-quote; no-open-quote y no-close-quote para controlar niveles de anidamiento; la función attr() para extraer valores de atributos HTML; y la función counter() para trabajar con contadores automáticos.

Además, se pueden combinar valores, como una imagen seguida de texto alternativo separado por una barra.

.elemento::before {
    content: normal; /* Equivalente a none en pseudo-elementos */
}

.elemento::after {
    content: none; /* No genera el pseudo-elemento */
}

Estos valores ofrecen flexibilidad para diferentes escenarios en el diseño web.

Uso de cadenas de texto en la propiedad content

Uno de los usos más comunes consiste en insertar cadenas de texto simples. Esto resulta particularmente útil para agregar iconos Unicode, separadores o información adicional sin modificar el markup.

Por ejemplo, se puede prependear un símbolo de enlace antes de cada hipervínculo y appendear la URL después, mejorando la usabilidad en sitios técnicos.

a::before {
    content: "\1F517 ";
}

a::after {
    content: " (" attr(href) ")";
}

Observe cómo el espacio después del carácter Unicode y antes del paréntesis asegura una separación adecuada. Alternativamente, se podría aplicar padding o margin al pseudo-elemento para lograr el mismo efecto.

Esta técnica permite mantener el HTML limpio mientras se enriquece la presentación visual, algo especialmente valioso en blogs de programación donde los enlaces externos son frecuentes.

Implementación de comillas automáticas

La propiedad content facilita la inserción de comillas alrededor de bloques de texto citado. Aunque HTML ofrece la etiqueta , el control mediante CSS proporciona mayor personalización.

Un ejemplo básico posiciona una comilla de apertura grande antes de un párrafo.

p {
    position: relative;
    font-size: 3rem;
    margin: 4rem;
}

p::before {
    content: open-quote;
    position: absolute;
    left: -3.5rem;
    top: -2rem;
    font-size: 8rem;
    color: rgba(0, 0, 0, 0.5);
}

Para comillas anidadas, se combina con la propiedad quotes, que define los caracteres para diferentes niveles de anidamiento.

q {
    quotes: "“" "”" "‘" "’" "“" "”";
}

q::before {
    content: open-quote;
}

q::after {
    content: close-quote;
}

Los valores no-open-quote y no-close-quote permiten suprimir visualmente las comillas en niveles específicos mientras mantienen el conteo de anidamiento. Esta funcionalidad resulta ideal para representar citas complejas en artículos técnicos o noticias de tecnología.

Extracción de contenido desde atributos HTML

La función attr() transfiere valores de atributos HTML directamente al contenido generado. Esto habilita patrones dinámicos sin JavaScript.

Un caso práctico frecuente es la creación de tooltips personalizados. En lugar de depender del atributo title nativo, se utiliza un atributo data-* para mayor control estilístico.

<span data-tooltip="Información adicional aquí">Texto con tooltip</span>

span[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    background: #333;
    color: #fff;
    padding: 0.5rem;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s;
}

span[data-tooltip]:hover::after {
    opacity: 1;
}

Para el puntero del tooltip, se emplea un ::before adicional con content: “”;. Esta aproximación mantiene la separación de preocupaciones y facilita el mantenimiento en aplicaciones web grandes.

En contextos actuales, donde la accesibilidad es prioritaria, se recomienda complementar con atributos aria-* para asegurar compatibilidad con lectores de pantalla.

Trabajo con contadores automáticos

La función counter() genera números secuenciales automáticamente, útil para listas personalizadas o numeración avanzada.

Primero se resetea el contador en el contenedor padre, luego se incrementa en cada ítem.

<ol>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
</ol>

ol {
    counter-reset: miContador;
    list-style: none;
}

li {
    counter-increment: miContador;
}

li::after {
    content: " [" counter(miContador) "] == [" counter(miContador, upper-roman)
        "]";
}

Esto permite estilos como numeración romana, alfabética o personalizada. En sitios de programación, se utiliza para enumerar pasos en tutoriales o secciones de código, ofreciendo mayor flexibilidad que las listas HTML estándar.

Los contadores también se combinan con counter-reset y counter-increment para estructuras anidadas complejas.

Inserción de imágenes y gradientes

La propiedad content acepta imágenes mediante url() o incluso gradientes CSS, actuando como fondo generado.

.decoracion::before {
    content: url(/ruta/a/imagen.png);
}

.gradiente::after {
    content: linear-gradient(to right, red, blue);
    display: block;
    height: 100px;
}

Se puede agregar texto alternativo después de una barra para accesibilidad, aunque el soporte varía entre navegadores en 2026. Esta característica resulta valiosa para decoraciones puramente visuales, como iconos SVG inline o patrones repetitivos.

Sin embargo, para imágenes semánticas se prefiere el uso de con alt adecuado.

Aplicaciones prácticas comunes en desarrollo web

Más allá de los valores básicos, los pseudo-elementos ::before y ::after resuelven problemas cotidianos en el diseño front-end.

Una técnica clásica es el clearfix para contenedores con elementos flotados, aunque en la era moderna de Flexbox y Grid su uso ha disminuido.

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

Otra aplicación frecuente es la adición de iconos decorativos antes de encabezados o ítems de menú.

h2::before {
    content: "\1F4BB ";
}

En formularios, se marcan campos obligatorios visualmente.

label[for]::after {
    content: " *";
    color: red;
}

Estas prácticas mantienen el HTML semántico mientras enriquecen la experiencia visual.

En proyectos de tecnología actuales, se combinan con transiciones y animaciones para efectos hover interactivos.

.boton::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.4s;
}

.boton:hover::before {
    opacity: 1;
}

Esto crea overlays sutiles sin elementos adicionales.

Consideraciones de accesibilidad y rendimiento

Aunque los pseudo-elementos ofrecen gran potencia, su contenido generado no forma parte del DOM accesible para lectores de pantalla en la mayoría de casos. Por ello, se reservan para elementos decorativos o cosméticos.

Cuando se inserta texto informativo mediante content, se duplica en HTML con clases de ocultación visual (como sr-only) para garantizar accesibilidad.

En términos de rendimiento, el impacto es mínimo en navegadores modernos, pero se evita abusar en listas muy largas.

La compatibilidad global es excelente en 2026, con soporte completo en todos los navegadores principales para los valores básicos. Características avanzadas como texto alternativo en imágenes mantienen soporte parcial.

Se recomienda usar la notación de doble dos puntos (::) para pseudo-elementos, conforme al estándar CSS3.

Mejores prácticas en el uso de ::before y ::after

Para maximizar los beneficios, se aplica el principio de separación de preocupaciones: el contenido estructural permanece en HTML, mientras que las decoraciones y mejoras visuales se manejan en CSS.

Se evita insertar contenido esencial mediante pseudo-elementos css, ya que podría afectar la accesibilidad.

Se combina con selectores específicos para targeting preciso, reduciendo la especificidad innecesaria.

En proyectos grandes, se documentan los usos comunes en guías de estilo internas.

Finalmente, se prueba en múltiples dispositivos y navegadores para asegurar consistencia.

Conclusiones

Los pseudo-elementos ::before y ::after, junto con la propiedad content, constituyen herramientas indispensables en el arsenal del desarrollador front-end. Permiten crear diseños sofisticados y mantenibles sin comprometer la semántica del HTML.

Desde la inserción simple de iconos hasta la gestión avanzada de contadores y tooltips personalizados, sus aplicaciones son variadas y poderosas. En el panorama tecnológico de 2026, donde la eficiencia y la experiencia de usuario priman, estas técnicas contribuyen significativamente a sitios web rápidos y elegantes.

Dominar su uso no solo mejora la calidad del código, sino que también fomenta creatividad en soluciones puramente CSS. Se recomienda experimentar con ejemplos propios y combinarlos con propiedades modernas como variables CSS o container queries para resultados aún más innovadores.