Introducción

Este tutorial explica con todo lujo de detalles cómo crear bordes inferiores animados en títulos H2 usando únicamente CSS, y cómo integrarlo correctamente en un sitio WordPress. Incluye varios patrones (línea desde el centro, desde la izquierda, degradado, animación al cargar, compatibilidad con prefers-reduced-motion) y las mejores prácticas para que el resultado sea accesible y fácil de mantener.

Concepto básico

La técnica más habitual consiste en usar un pseudo-elemento (::after o ::before) posicionado en la parte inferior del H2. Ese pseudo-elemento actúa como barra que, mediante transformaciones y transiciones, se anima para mostrarse o desaparecer. Ventajas: no añade marcado adicional, funciona con cualquier contenido, y es fácilmente personalizable con variables CSS.

Ejemplo 1 — Línea que se dibuja de izquierda a derecha al pasar el ratón

Marcado HTML (añade la clase al H2 desde el editor de bloques o desde el HTML del post):

Título de ejemplo

CSS (puedes pegarlo en Apariencia → Personalizar → CSS adicional, o en el archivo style.css de tu tema hijo):

.underline-h2 {
  position: relative
  display: inline-block / Mantener ancho del texto /
  padding-bottom: 6px   / Espacio para la línea /
  margin-bottom: 0.5em
}

.underline-h2::after {
  content: 
  position: absolute
  left: 0
  bottom: 0
  height: 3px                 / grosor de la línea /
  width: 100%
  background-color: #ff6b6b   / color de la línea /
  transform: scaleX(0)
  transform-origin: left center
  transition: transform 300ms cubic-bezier(.2,.8,.2,1)
}

.underline-h2:hover::after,
.underline-h2:focus::after {
  transform: scaleX(1)
}

/ Responsivo: reducir grosor en pantallas chicas /
@media (max-width: 480px) {
  .underline-h2::after { height: 2px }
}

/ Preferencias de reducción de movimiento /
@media (prefers-reduced-motion: reduce) {
  .underline-h2::after {
    transition: none
    transform: none
  }
}

Variantes y personalizaciones

• Desde el centro: cambia transform-origin a center y la animación parecerá expandirse desde el centro.
• Color degradado: utiliza background-image con un gradiente para una barra multicolor.
• Grosor y separación: ajusta height y padding-bottom para controlar el grosor y la distancia al texto.
• Bloque completo: si quieres que la barra ocupe todo el ancho del contenedor en lugar del texto, aplica la clase a un contenedor o usa display:block y width:100%.

Ejemplo 2 — Degradado que aparece desde la izquierda

Título con degradado

.underline-gradient {
  position: relative
  display: inline-block
  padding-bottom: 8px
}

.underline-gradient::after {
  content: 
  position: absolute
  left: 0
  bottom: 0
  width: 100%
  height: 4px
  background-image: linear-gradient(90deg, #ff6b6b, #f7b733)
  transform: translateX(-100%)
  transition: transform 450ms cubic-bezier(.2,.8,.2,1)
}

.underline-gradient:hover::after,
.underline-gradient:focus::after {
  transform: translateX(0)
}

Ejemplo 3 — Animación al cargar (sin hover)

Si prefieres que la barra se anime al cargar la página (por ejemplo, en una página de aterrizaje), usa keyframes y una clase que active la animación.

Título animado al cargar

.underline-onload {
  position: relative
  display: inline-block
  padding-bottom: 6px
}

.underline-onload::after {
  content: 
  position: absolute
  left: 0
  bottom: 0
  height: 3px
  width: 100%
  background-color: #5a67d8
  transform: scaleX(0)
  transform-origin: left center
  animation: drawLine 900ms cubic-bezier(.2,.8,.2,1) forwards
}

/ keyframes: de 0 a 100% /
@keyframes drawLine {
  0%   { transform: scaleX(0) }
  60%  { transform: scaleX(1.05) } / pequeño rebote /
  100% { transform: scaleX(1) }
}

/ Respetar prefers-reduced-motion /
@media (prefers-reduced-motion: reduce) {
  .underline-onload::after {
    animation: none
    transform: none
  }
}

Accesibilidad y consideraciones de rendimiento

1. prefers-reduced-motion: siempre incluye una ruta que elimine o reduzca animaciones para usuarios que lo requieran.
2. Contraste: asegúrate de que el color de la línea tenga contraste suficiente con el fondo para usuarios con baja visión.
3. Evitar repaints costosos: usar transform y opacity en lugar de propiedades que fuerzan reflow (como width animada) mejora el rendimiento.
4. Navegadores y RTL: para sitios en RTL, ajusta transform-origin y posicionamiento (por ejemplo, usar right en lugar de left o comprobar transform-origin: right).

Integración en WordPress

Opciones para añadir el CSS al sitio WordPress:

• Apariencia → Personalizar → CSS adicional: pegar las reglas CSS directamente.
• Archivo style.css del tema hijo: ideal para cambios permanentes y control de versiones.
• Plugin de CSS personalizado (Simple Custom CSS, etc.).
• Encolando un archivo CSS desde functions.php si prefieres mantener un archivo separado (recomendado en temas y child themes).

Ejemplo de función para encolar un archivo CSS en functions.php de tu tema hijo:

Si no quieres crear un archivo nuevo, pega la CSS directamente en Apariencia → Personalizar → CSS adicional.

Cómo aplicar la clase a un H2 en el editor de bloques (Gutenberg)

1. Selecciona el bloque H2.
2. En la barra lateral derecha, expande la sección Avanzado.
3. En Clases CSS adicionales, escribe: underline-h2 (o la clase que hayas usado en CSS).
4. Actualiza o publica la entrada/página.

Consejos avanzados

• Usa variables CSS para centralizar colores, grosores y tiempos: –underline-color, –underline-thickness, –underline-duration.
• Para estilos globales en entradas, apunta a .entry-content h2 o al selector que use tu tema, en lugar de añadir clases manualmente.
• Combina con tipografías web y espaciados (line-height, margin) para que la línea no solape el texto en móviles.
• Si usas constructores (Elementor, WPBakery), la mayoría permiten añadir clases CSS al widget/elemento aplica la clase allí.

Ejemplo final completo con variables

:root {
  --underline-color: #2b6cb0
  --underline-thickness: 3px
  --underline-duration: 360ms
}

.h2-animated {
  position: relative
  display: inline-block
  padding-bottom: calc(var(--underline-thickness)   6px)
}

.h2-animated::after {
  content: 
  position: absolute
  left: 0
  bottom: 0
  height: var(--underline-thickness)
  width: 100%
  background: var(--underline-color)
  transform: scaleX(0)
  transform-origin: left center
  transition: transform var(--underline-duration) cubic-bezier(.2,.8,.2,1)
}

.h2-animated:hover::after,
.h2-animated:focus::after {
  transform: scaleX(1)
}

@media (prefers-reduced-motion: reduce) {
  .h2-animated::after {
    transition: none
    transform: none
  }
}

Notas finales

Estas técnicas son ligeras y compatibles con la mayoría de temas modernos. Ajusta colores, tiempos y grosor según el diseño del sitio. Usa clases para tener control preciso o selectores globales si quieres aplicarlo a todos los H2 del contenido.