Skip to content

Instantly share code, notes, and snippets.

@elfacht

elfacht/animated-underlines.css

Created January 5, 2022 11:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elfacht/0f134f1c09782bd388834280abebf6a4 to your computer and use it in GitHub Desktop.
Save elfacht/0f134f1c09782bd388834280abebf6a4 to your computer and use it in GitHub Desktop.
Download ZIP
Animated multiline link underlines with CSS
Raw
animated-underlines.css
/* @source https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-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 {
background-size: 100% 2px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment