Permalink
Browse files

Animate link underlines on hover

There are other CSS-only solutions, but this one works perfectly when
the link spans multiple lines. The other one (that uses :after) only
underlines the part of the link that's on the first line.
  • Loading branch information...
dguo committed May 20, 2018
1 parent 6fd5400 commit 14e51391329163fa414ac55d77fdf6da521ab644
Showing with 11 additions and 1 deletion.
  1. +11 −1 static/css/general.css
@@ -25,8 +25,18 @@ a {
text-decoration: none;
}

/* Animated link underline on hover
Adapted from https://codepen.io/shshaw/details/pdyJBW */
a:not(.anchorjs-link):not(.link-button) {
background-image: linear-gradient(currentColor, currentColor);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .3s;
}

a:not(.anchorjs-link):not(.link-button):hover {
text-decoration: underline;
background-size: 100% 2px;
}

body {

0 comments on commit 14e5139

Please sign in to comment.