¿Qué es text-decoration?
text-decoration es la propiedad de CSS que dibuja líneas en el texto: subrayados, líneas superiores y tachados. Es una abreviatura de cuatro propiedades que controlan el tipo, el color, el estilo y el grosor de la línea, por lo que una sola regla puede configurarlos a la vez. Se usa mucho para modificar el subrayado de los enlaces.
Más sobre text-decoration
Los navegadores usan esta propiedad en sus propios estilos: los enlaces aparecen subrayados porque la hoja de estilo predeterminada les aplica text-decoration. Por eso la propiedad aparece en el CSS de casi todos los sitios. El diagrama anterior muestra sus valores principales.
¿Qué puede definir text-decoration?
Cuatro aspectos, cada uno con su propia propiedad específica. El tipo de línea (text-decoration-line) puede ser underline, overline, line-through o none. El color (text-decoration-color) puede ser cualquier color de CSS, independiente del texto. El estilo (text-decoration-style) puede ser solid, double, dotted, dashed o wavy. El grosor (text-decoration-thickness) acepta una longitud, un porcentaje o el grosor recomendado por la fuente. La propiedad abreviada admite estos valores en cualquier orden:
a { text-decoration: underline wavy red 2px; }
Una nota de compatibilidad: Safari empezó a aceptar el estilo, el color y el grosor dentro de la propiedad abreviada a finales de 2025; las versiones anteriores descartan la regla completa. Si necesitas compatibilidad con esos navegadores, usa las propiedades específicas por separado, que llevan años funcionando en todos los navegadores principales.
Cómo dar estilo al subrayado de los enlaces
La regla clásica a { text-decoration: none; } elimina el subrayado de los enlaces. Si lo quitas, los enlaces necesitan una señal que no dependa únicamente del color. Un peso tipográfico mayor puede servir; si el color es la única diferencia visible en reposo, combina un contraste fuerte con el texto circundante y un subrayado o resalte similar al pasar el puntero y al recibir el foco. CSS moderno también permite mejorar el subrayado en vez de eliminarlo: text-underline-offset separa la línea del texto y text-decoration-color suaviza su color.
La particularidad de la herencia
Las decoraciones de texto no se heredan de la forma habitual; se dibujan sobre todo el contenido del elemento decorado. Un span dentro de un párrafo subrayado sigue subrayado aunque le asignes text-decoration: none, porque la línea pertenece al párrafo, no al span. Para excluir un elemento secundario, cambia su tipo de visualización: display: inline-block crea una caja propia y la línea del elemento principal se detiene en sus bordes.
Preguntas Frecuentes
- Usa
a { text-decoration: none; }o aplica una clase a ciertos enlaces. En WordPress, el campo está en Apariencia → Editor → Estilos → menú de tres puntos para temas de bloques, o Apariencia → Personalizar para temas clásicos. Mantén estados visibles al pasar el puntero y recibir foco. - Comprueba primero si la línea procede de un elemento antecesor, porque un elemento secundario no puede cancelar su decoración. Si no es así, otra regla puede tener mayor prioridad; los temas suelen volver a aplicar subrayados a enlaces visitados o al pasar el puntero.
- De forma predeterminada, un subrayado queda cerca del texto, se interrumpe al cruzar descendentes como la g o la p y termina con las palabras.
border-bottompertenece a la caja del elemento: queda más abajo, ocupa todo su ancho y puede exigir ajustar el espacio. - No. Los buscadores no posicionan una página por sus subrayados o tachados. Diseña estas líneas para las personas. El efecto indirecto es de usabilidad: si los lectores no reconocen un enlace, no hacen clic en él.
Diseño Web Personalizado
Obtén un sitio web único y compatible con dispositivos móviles que haga brillar tu marca. Comparte tu visión con nosotros y nos encargaremos del resto.
Diseño Web Personalizado