Subrayado animado de enlaces con CSS

Código CSS para añadir efecto de subrayado con animación a los enlaces de la web


por

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»

  1. Avatar de Wajari Velásquez

    |

    Me encanta ese detalle para los links. Muchísimas gracias por el aporte Esther. Un saludo 😉

    1. Avatar de esther

      |

      Gracias!! Me alegra que te guste 🙂

  2. Avatar de Daniel

    |

    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!

    1. Avatar de esther

      |

      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!

  3. Avatar de Daniel

    |

    Muy útil todo! Muchas gracias Esther!!!

    1. Avatar de Daniel

      |

      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

      1. Avatar de esther

        |

        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,

        1. Avatar de Daniel

          |

          Muchas gracias de nuevo Esther! Funcionó perfecto!

  4. Avatar de alejandro

    |

    muy buen estilo, solo una pregunta para que se mantenga activo cuando se le dio en ese link como podria ser??

    1. Avatar de esther

      |

      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!

  5. Avatar de david

    |

    Esta genial, gracias

  6. Avatar de Julian

    |

    UN MILLON DE GRACIAS ESTHER!! eres la mejor

    1. Avatar de esther

      |

      Muchas gracias Julián ☺️

  7. Avatar de Camilo Vargas

    |

    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?

    1. Avatar de esther

      |

      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!

  8. Avatar de Alí

    |

    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!

    1. Avatar de esther

      |

      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!

  9. Avatar de Lisandro Chirinos

    |

    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;