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.

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 {