Tutorial WordPress: Cambiar el color del subrayado de enlaces con text-decoration-color

Qué hace text-decoration-color

text-decoration-color es una propiedad CSS que permite controlar el color de la decoración del texto (subrayado, sobrelínea o tachado) de forma independiente del color del propio texto. Es especialmente útil en enlaces, porque permite que el texto y su subrayado tengan colores distintos sin recurrir a técnicas con bordes o imágenes.

Sintaxis básica y propiedades relacionadas

Las propiedades implicadas son:

text-decoration-line: especifica si hay underline, overline, line-through.
text-decoration-color: color de la decoración (p. ej. #ff0000, rgba(0,0,0,.5)).
text-decoration-style: estilo de la línea (solid, wavy, dashed, dotted).
text-decoration-thickness: grosor de la línea (auto, número, longitud).
text-decoration-skip-ink: controla el comportamiento de skip-ink (por defecto evita que la línea cruce letras como g, y).

Ejemplo mínimo: subrayado con color distinto al texto

a {
  color: #222                          / color del texto /
  text-decoration-line: underline      / aseguramos que hay subrayado /
  text-decoration-color: #e91e63       / color del subrayado /
  text-decoration-thickness: 2px       / grosor del subrayado /
  text-decoration-style: solid         / estilo de la línea /
}

Cómo aplicarlo correctamente en WordPress

En WordPress hay diversas maneras seguras de añadir este CSS sin tocar los ficheros del theme original:

Personalizador (Apariencia gt Personalizar gt CSS adicional): pega tu CSS y publica. Es inmediato y seguro para la mayoría de usuarios.
Child theme: añade el código a style.css del child theme para cambios permanentes y versionables.
Plugin de CSS personalizado: instala un plugin tipo Simple Custom CSS si prefieres gestionarlo como plugin.
Enqueue desde functions.php (para desarrolladores): añadir una hoja propia o estilos inline mediante funciones PHP. Ejemplo abajo.

Ejemplo para pegar en CSS adicional (Personalizador)

/ Subrayado rosa solo en el contenido de entradas /
.entry-content a,
.post-content a,
.wp-block a {
  color: #222
  text-decoration-line: underline
  text-decoration-color: #e91e63
  text-decoration-thickness: 2px
  text-decoration-skip-ink: none / evita que el subrayado salte en algunas letras /
}

/ Estados: hover/focus/active /
.entry-content a:hover,
.entry-content a:focus {
  text-decoration-color: #ff4081
  text-decoration-thickness: 3px
  outline: none
}

Ejemplo práctico: aplicar solo a menús o secciones concretas

Si quieres cambiar solo los enlaces del menú principal o de un widget, usa selectores más específicos.

/ Menú principal /
.main-navigation a {
  text-decoration-line: underline
  text-decoration-color: #0066cc
  text-decoration-thickness: 1.5px
}

/ Enlaces de widgets /
.widget a {
  text-decoration-color: rgba(0,0,0,0.6)
}

Alternativa cuando necesitas más control visual

Si buscas efectos que el subrayado no puede ofrecer (separación del texto, animaciones con pseudo-elementos, subrayados con degradados), usa border-bottom o pseudo-elementos. Ejemplo:

/ Alternativa con border-bottom /
.entry-content a {
  color: #222
  text-decoration: none / quitar el underline por defecto /
  border-bottom: 2px solid #ff5722
  padding-bottom: 2px / separa ligeramente la línea del texto /
}

Ejemplo: añadir CSS desde functions.php (método de desarrollo)

Este fragmento añade CSS inline en el head. Es práctico en child themes o plugins: reemplaza los selectores según tu tema.

Compatibilidad y fallback

Navegadores modernos: la mayoría (Chrome, Firefox, Edge Chromium, Safari y navegadores móviles recientes) implementan text-decoration-color.
Versiones antiguas: en navegadores muy antiguos que no soporten la propiedad, la decoración se dibujará con el color del propio texto. Por eso suele ser buena idea definir también color del texto o usar un fallback con border-bottom si es crítico.
Importancia de la especificidad: muchos themes gestionan estilos de enlaces con reglas específicas si no ves el cambio, inspecciona con las DevTools y aumenta la especificidad o usa !important con precaución.

Consejos prácticos y buenas prácticas

Prueba en móvil y tablet: algunos motores de rendering pueden renderizar la línea de forma distinta.
No abuses de !important primero intenta usar selectores con suficiente especificidad (.entry-content a, .site-header .menu a, etc.).
Si usas Gutenberg (bloques), targetea .wp-block a o la clase que el bloque añade, o asigna una clase CSS a un bloque desde la barra lateral y luego estilízala.
Si quieres animaciones en hover (mover o decorar gradualmente), usa transiciones en text-decoration-thickness o usa pseudo-elementos para animaciones más suaves.
Recuerda vaciar cache de plugins de caché o CDN tras publicar el CSS nuevo.

Diagnóstico rápido si no funciona

Inspecciona el elemento con DevTools para ver si otra regla sobrescribe tu CSS.
Asegúrate de que tu CSS se carga después del CSS del theme (el Personalizador o un child theme normalmente lo harán).
Comprueba que el selector coincide con el HTML generado por tu theme (algunos themes usan wrappers o clases personalizadas).
Prueba la regla directamente en DevTools para validar antes de pegarla permanentemente.

Resumen final

text-decoration-color es la forma moderna y semántica de cambiar el color del subrayado sin tocar el color del texto. En WordPress lo añades con un fragmento CSS en el Personalizador, en tu child theme o mediante funciones PHP. Si necesitas control extra (separación, animaciones, degradados), emplea border-bottom o pseudo-elementos. Comprueba la especificidad y el cache si no se aplica de inmediato.

SushiHost