Generador de subrayado animado para enlaces (CSS)
Elige el efecto y pasa el mouse (o Tab) por los enlaces de la vista previa. El código usa background-size, que funciona en enlaces de varias líneas.
Cómo usarEnlaces con subrayado en movimiento
Este párrafo tiene un enlace corto y también un enlace mucho más largo que puede partirse en dos líneas en el celular para probar el efecto.
Disponible en: 
Generador de subrayado animado para enlaces (CSS): para qué sirve
Un subrayado que se anima al pasar el mouse da un acabado cuidado a los enlaces de menús y textos. Hecho con ::after, solo funciona en enlaces de una línea; este generador dibuja la línea con background-image y anima el background-size, lo que funciona incluso cuando el enlace se parte.
Elige entre cinco efectos (crece desde la izquierda, desde el centro, se desliza, marcador y ondulado), el color, el grosor y la duración. Una línea fina queda siempre visible por defecto, para que el enlace se distinga del texto como pide la WCAG 1.4.1, y el efecto aparece también con el foco del teclado.
Cómo usar
- Elige el efecto.
- Ajusta el color, el grosor y la duración.
- Copia el CSS y aplica la clase a los enlaces.
Cuándo usar
- Menús de navegación.
- Enlaces dentro de artículos.
- Pies de página y listas de enlaces.
Preguntas frecuentes
¿Por qué usar background y no un ::after?
Con un pseudoelemento ::after la línea solo funciona en enlaces de una línea. Dibujando el subrayado con background-image y animando el background-size, la línea acompaña el texto incluso cuando el enlace se parte en dos líneas.
¿El enlace sigue pareciendo un enlace?
En medio de un párrafo, el enlace debe distinguirse del texto incluso sin el mouse encima (WCAG 1.4.1). Por eso la opción de dejar una línea fina siempre visible viene marcada; el efecto se anima por encima de ella.
¿Y en el celular?
En el celular no hay hover; el efecto aparece con el foco y al tocar. La línea base visible garantiza que los enlaces se reconozcan.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.