Tutorial WordPress: Subrayado ondulado para resaltar texto con text-decoration y CSS

Subrayado ondulado para resaltar texto en WordPress con text-decoration y CSS

Este artículo ofrece un tutorial completo y práctico para conseguir un subrayado ondulado (wavy underline) en textos de WordPress usando las propiedades modernas de CSS (text-decoration-) y alternativas más robustas para compatibilidad y control visual. Incluye ejemplos listos para copiar, formas de añadir el CSS en WordPress y consideraciones de accesibilidad y compatibilidad.

Qué ofrece esta técnica y por qué usarla

Aspecto moderno: el estilo wavy es elegante y llamativo, ideal para destacar palabras o frases sin usar fondos sólidos.
Control tipográfico: puedes controlar color, grosor y separación del subrayado.
Sencillez: con propiedades nativas de CSS (text-decoration-style, text-decoration-color, text-underline-offset) es muy fácil de aplicar.
Flexibilidad: si el navegador no soporta la propiedad, hay alternativas (SVG/gradient o pseudo-elementos) que aseguran una apariencia coherente.

Propiedades CSS clave

text-decoration-style: determina el tipo de subrayado: solid, double, wavy, dotted, dashed.
text-decoration-color: color del subrayado.
text-decoration-thickness: controla el grosor del subrayado (o border-height en navegadores sin soporte exacto).
text-underline-offset: separa el subrayado del texto (útil para fonts con gran ascendencia/descendencia).
text-decoration-skip-ink: controla si la decoración se salta cuando cruza caracteres con formas (útil para legibilidad).

Ejemplo 1 — Subrayado ondulado básico (soporte moderno)

Una clase simple que aplica un subrayado ondulado usando las propiedades nativas:

.wavy-underline {
  text-decoration-line: underline
  text-decoration-style: wavy
  text-decoration-color: #ff6b6b
  text-decoration-thickness: 0.15em
  text-underline-offset: 0.12em
  text-decoration-skip-ink: none
}

Uso en contenido (editor HTML o bloque HTML en Gutenberg):

Texto con subrayado ondulado

Ejemplo 2 — Subrayado ondulado multicolor y responsivo

Controlando color y grosor según tamaño de pantalla:

.wavy-underline--accent {
  text-decoration-line: underline
  text-decoration-style: wavy
  text-decoration-color: #0ea5a4 / color principal /
  text-decoration-thickness: 0.12em
  text-underline-offset: 0.14em
}

/ Aumentar grosor en pantallas grandes /
@media (min-width: 1024px) {
  .wavy-underline--accent {
    text-decoration-thickness: 0.18em
    text-underline-offset: 0.18em
  }
}

Compatibilidad y fallback

La propiedad text-decoration-style: wavy funciona en la mayoría de navegadores modernos, pero puede no comportarse igual o no estar disponible en navegadores antiguos o ciertos WebViews. Para garantizar apariencia consistente, se recomiendan dos estrategias de fallback:

Usar un background-image tipo SVG o gradiente repetido que simule una onda.
Crear la onda con un pseudo-elemento ::after que use una imagen SVG o un patrón en repeating-x, dejando el texto intacto.

Ejemplo 3 — Fallback con SVG en background-image (recomendado para navegadores sin soporte)

Este método usa una imagen SVG incorporada como data URI. Funciona bien en una sola línea o en bloques con display: inline-block. Para párrafos multi-línea puede necesitar ajustes adicionales.

.wavy-fallback {
  position: relative
  text-decoration: none / quitar subrayado nativo si existiera /
  background-image: url(data:image/svg xmlutf8,)
  background-repeat: repeat-x
  background-position: 0 100%
  background-size: auto 0.6em / ajustar altura de la onda /
  padding-bottom: 0.15em / separa la onda del texto /
}

Uso:

Texto con subrayado ondulado (fallback SVG)

Ejemplo 4 — Subrayado con pseudo-elemento para patrones más complejos (soporta control por línea)

El pseudo-elemento permite poner la onda debajo del texto sin afectar el flujo del mismo. Es útil si quieres animaciones, degradados o aplicar efectos sólo en la parte visual.

.wavy-pseudo {
  position: relative
  display: inline-block / necesario para alineación precisa /
}

.wavy-pseudo::after {
  content: 
  position: absolute
  left: 0
  right: 0
  bottom: 0.08em
  height: 0.6em
  background-image: url(data:image/svg xmlutf8,)
  background-repeat: repeat-x
  background-size: auto 100%
  pointer-events: none
  z-index: 0
}

Notas: para textos de varias líneas, la técnica con pseudo-elemento puede necesitar display: inline-flex y un ajuste de height para cubrir las líneas sin embargo, manejar ondas en múltiples líneas visualmente perfectas es complejo y a menudo la propiedad nativa text-decoration es preferible cuando está disponible.

Cómo añadir el CSS en WordPress

Opciones recomendadas según tu entorno:

Customizer (Apariencia → Personalizar → CSS adicional): pega tu CSS personalizado y guarda. Es rápido y no requiere editar archivos del tema.
Child theme (style.css): si usas un tema hijo, añade las clases en style.css para mantener los cambios tras actualizaciones.
Enqueue desde functions.php: cuando quieres empaquetar estilos en un plugin o theme, registra y encola una hoja de estilos.
Bloques de Gutenberg: en un bloque HTML o en Editar como HTML puedes insertar el en el contenido.

Ejemplo de cómo encolar una hoja CSS desde functions.php de un theme o plugin:

function tema_enqueue_custom_styles() {
  wp_enqueue_style( tema-wavy-underline, get_stylesheet_directory_uri() . /css/wavy-underline.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, tema_enqueue_custom_styles )

Cómo aplicar la clase en el editor de WordPress (Gutenberg y Classic)

Gutenberg – Para todo el bloque: selecciona el bloque (párrafo o título), abre la pestaña Avanzado en la barra lateral y en Additional CSS class(es) escribe por ejemplo wavy-underline. Para un fragmento inline dentro de un párrafo, selecciona el bloque y elige Editar como HTML y envuelve el texto con ltspan class=wavy-underlinegt…lt/spangt.
Classic Editor – Cambia a la pestaña Texto (HTML) y añade el ltspan class=wavy-underlinegt alrededor del texto que quieras resaltar.
Bloque HTML – Inserta un bloque Custom HTML y pega el HTML con el span.

Compatibilidad de navegadores (resumen)

Funcionalidad	Soporte en navegadores modernos
text-decoration-style: wavy	Soportado en la mayoría de navegadores modernos (Chrome, Edge, Firefox, Safari recientes). En algunos entornos antiguos o webviews puede no funcionar igual.
text-underline-offset / text-decoration-thickness	Soporte en navegadores modernos verificar versiones antiguas para variaciones en la sintaxis.
SVG background / pseudo-element	Amplio soporte (por ser imágenes y pseudo-elementos), funcionan como fallback.

Consideraciones de accesibilidad y diseño

Contraste: asegúrate de que el color del subrayado y del texto cumplen con ratio de contraste razonable si el subrayado comunica información (por ejemplo, enlaces).
No depender solo del color: si el subrayado indica interacción (enlaces), mantén otras señales (como subrayado tradicional o icono) para usuarios con daltonismo u otras dificultades de percepción.
Reduce animaciones para preferencias del usuario: si animas la onda, respeta prefers-reduced-motion.
Impresión: revisa estilos de impresión si quieres ocultar/o ajustar el subrayado en versión impresa.

Consejos finales y solución de problemas

Si el subrayado no aparece: verifica que no haya otra regla CSS con mayor especificidad que anule text-decoration, revisa en las herramientas de desarrollo (Inspector).
Para subrayados en enlaces, algunos navegadores aplican text-decoration por defecto usa text-decoration-skip-ink o text-decoration-thickness para armonizar.
Si usas pseudo-elementos y el texto queda desplazado o la onda no coincide, ajusta bottom y padding-bottom, y confirma display:inline-block o inline-flex según necesites.
Para contenido multi-línea que requiera una onda continua y perfecta, la solución nativa (text-decoration-style: wavy) suele ser la mejor opción cuando está disponible si no, considera rediseñar la interacción para evitar problemas de renderizado.

Conclusión

El subrayado ondulado es una forma elegante y moderna de resaltar texto en WordPress. Con las propiedades de text-decoration actuales obtienes resultados sencillos y ligeros para compatibilidad total, combina soluciones con SVG en background o pseudo-elementos. Añadir las clases en WordPress es directo vía Customizer, theme child o encolando estilos. Revisa siempre la legibilidad, el contraste y el comportamiento en móviles y entornos antiguos para ofrecer una experiencia consistente.

SushiHost