No se si te habrás fijado que en algunas páginas web y blogs, los enlaces se subrayan de forma animada al pasar por encima de ellos. Me refiero a este efecto:
Enlace con animación de subrayado
Como me gustaba mucho este detalle, estuve buscando y probando para implementarlo, pero los primeros que encontré sólo me funcionaban para textos de una sola línea, si eran títulos de posts que suelen ser más largos, sólo se subrayaba la primera línea.
Enlace con animación de subrayado
para textos multilínea
Buscando más encontré este código en este artículo que muestra exactamente cómo hacer lo que comento, y de forma fácil con unas líneas de CSS:
a {
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .3s;
}
a:hover, a:focus {
background-size: 100% 2px;
}En este caso, los estilos se aplican a todos los enlaces de la web, pero podríamos añadir selectores en concreto para que sólo afectara a algunos enlaces en concreto o sólo de alguna zona de la página.
Por ejemplo, en el caso de esta web, he añadido una línea a los estilos del menú para que no cogiera la animación:
.genesis-nav-menu a {
background-image: none;
}
Fácil, ¿verdad?
Adoro el CSS…
Comentarios
18 respuestas a «Subrayado animado de enlaces con CSS»
|
Me encanta ese detalle para los links. Muchísimas gracias por el aporte Esther. Un saludo 😉
|
Gracias!! Me alegra que te guste 🙂
|
Era justo lo que buscaba! Muy bueno. Una pregunta, tengo otro estilo personalizado para el menú de navegación, pero al aplicar este estilo, también se añade al menú. ¿Sabrías si hay alguna manera de añadir el menú como excepción para dejarlo como estaba? Muchas gracias!
|
Hola Daniel!
Puedes añadir una excepción para los enlaces del menú, como indico al final del artículo, o si te es mejor, aplicar estos estilos sólo, por ejemplo, a los enlaces dentro del contenido, para evitar los de la cabecera y pie.
Si en lugar de utilizar el selector ‘a’ en general, usas por ejemplo .content a {}, sólo se aplicará la animación a los enlaces dentro del bloque ‘.content’.
Saludos!
|
Muy útil todo! Muchas gracias Esther!!!
|
Una última duda con esto, perdona que sea pesado! jaja Ya solucioné el tema de los menús añadiendo la excepción que comentas en el post. Pero me pasa también en las imágenes. Al pasar el ratón por encima, la imagen muestra el hover debajo de la misma. Para quitarlo, imagino que se podría también añadir una excepción a las imágenes al igual que con el menú. Pero no doy con la manera. Muchas gracias de antemano
|
Hola Daniel! Prueba a añadir estos estilos a las imágenes:
img {height: auto;
vertical-align: top;
}
Deberían evitar que te salga el hover bajo la imagen.
Saludos,
|
Muchas gracias de nuevo Esther! Funcionó perfecto!
|
muy buen estilo, solo una pregunta para que se mantenga activo cuando se le dio en ese link como podria ser??
|
Hola Alejandro,
El selector :visited de CSS permite aplicar estilos a los enlaces que ya se han clicado. En esta web tienes más información: https://www.w3schools.com/cssref/sel_visited.asp
Espero que te sirva!
|
Esta genial, gracias
|
UN MILLON DE GRACIAS ESTHER!! eres la mejor
|
Muchas gracias Julián ☺️
|
Estuve buscando esto por mucho tiempo, pero una pregunta, si lo que quiero es subrayar el texto, es decir, que la línea no aparezca ni arriba ni abajo, sino en el texto, ¿qué debo hacer?
|
Hola Camilo,
Para conseguir el mismo efecto pero, como dices, que el color quede subrayando el texto, no debajo, puedes cambiar el tamaño del fondo al hacer el foco:
a:hover, a:focus {background-size: 100% 12px;
}
Ojo en este caso en escoger un color claro para el subrayado sino dificultará la legibilidad del texto 😉
Saludos!
|
Hola! Está buenisima la data, me encanta! Pero tengo un problema, cuando paso la flecha por encima de los links la linea se mueve hacia arriba cuando sale el efecto. Que puedo hacer para que el link no haga ese salto? Gracias!
|
Hola Alí,
Pues imagino que hay algún otro estilo que está modificando el estilo y provoca ese salto. Revisa en el inspector del navegador los estilos que se están aplicando a los enlaces, en reposo y en el :hover, a ver si detectas que propiedad es la que está afectando.
Saludos!
|
Gran aporte lo habia visto hace tiempo en la pagina de spacex y me pregunte como se hacia pero no encontre y me conforme con text-decoration: underline;