Las Nuevas Propiedades De Text Decoration En CSS

Text decoration css no es solo subrayado. Es un conjunto de propiedades modernas y versátiles que permiten personalizar hasta el último detalle del estilo de texto en la web.

Muchos desarrolladores se limitan a usar text-decoration: underline; sin saber que detrás hay una caja de herramientas completa para crear subrayados únicos, animados, gruesos, coloridos o que evitan interferir con las letras descendentes como la “g”. Este artículo revela todo ese potencial, con ejemplos prácticos y enfoques creativos para dar a tu tipografía el control visual que merece.

Índice

• ¿Qué es text-decoration en CSS?
• Propiedades avanzadas de text-decoration
• Ejemplos visuales y comparativas
• Casos de uso reales
• Compatibilidad con navegadores
• Consejos para SEO y accesibilidad
• Conclusión

¿Qué es text-decoration en CSS?

La propiedad text-decoration permite añadir decoraciones a texto como líneas por debajo, encima o a través del texto. Aunque la más usada es underline, existen otras variantes como overline y line-through. Lo interesante comienza cuando se combinan con otras subpropiedades.

Propiedades avanzadas de text-decoration

Estas son las propiedades más desconocidas y útiles que puedes usar para personalizar decoraciones en texto:

• text-decoration-thickness: ajusta el grosor de la línea. Ejemplo: 5px.
• text-decoration-color: define el color de la línea, independiente del color del texto.
• text-decoration-style: permite que la línea sea solid, dashed o wavy.
• text-decoration-skip-ink: controla si la línea salta las letras con descendentes (como g, j, p).
• text-decoration-line: permite combinar underline, overline y line-through.
• text-underline-offset: define la separación entre el texto y la línea.

Tabla comparativa

Ejemplos visuales y comparativas

Aquí tienes una referencia visual inspirada en los distintos estilos de text-decoration:

Cada línea representa un estilo distinto de subrayado, destacando la diferencia entre grosor, color, desplazamiento y tipo de línea. Estas variaciones permiten reforzar el branding, mejorar la legibilidad o simplemente dar un aspecto más moderno a tu interfaz.

Casos de uso reales

• Subrayados coloridos animados para titulares o enlaces importantes.
• Diseño accesible para usuarios con problemas de visión (ajustando grosor y separación).
• Presentaciones editoriales con estilos tipográficos personalizados (como revistas digitales).
• Botones y CTA con efectos visuales sin necesidad de JavaScript.

Compatibilidad con navegadores

Todas estas propiedades están soportadas en los principales navegadores modernos: Chrome, Firefox, Safari, Edge y navegadores móviles. Puedes consultar compatibilidad detallada en Can I Use.

Consejos para SEO y accesibilidad

• Evita usar solo el color para transmitir significado: combina color y estilo.
• Haz pruebas con lectores de pantalla si el texto decorado es parte de la navegación.
• No abuses de los subrayados si el contenido no es interactivo: puede confundir con enlaces.
• Usa clases CSS para mantener una estructura semántica clara y reutilizable.

Conclusión

Text decoration css es mucho más que un simple subrayado. Aprovechando propiedades como thickness, style o offset, es posible llevar el diseño tipográfico al siguiente nivel sin usar JavaScript ni librerías externas. Ya sea para dar estilo a titulares, mejorar la accesibilidad o enriquecer la experiencia visual, estas propiedades permiten expresarte con precisión y creatividad directamente desde tu CSS.

¿Ya las usas en tus proyectos? Si no, este es el momento perfecto para empezar a experimentar con ellas.

Fuentes y referencias:

• MDN Web Docs: text-decoration
• CSS-Tricks: Text Decoration