Animated Underline on Hover with CSS

Adding an animated underline on hover to links using CSS is a popular modern technique that likely has a few different solutions. The one in this snippet animates the underline by means of a gradient, various background-related properties, and a pseudo-element.

This can also be done using an extra <span> element inside the link (instead of the pseudo-element), but using a pseudo-element keeps the HTML clean.

Below is the code. I explained the customizable parts in the comments:

a, a:link, a:visited {
  color: white;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px; /* The distance between text and underline */
}

a::before {
  content: "";
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  background-image: linear-gradient(90deg, white, white); /* underline color */
  background-size: 0 2px; /* vertical size of underline */
  background-repeat: no-repeat;
  background-position: left bottom; /* start position of underline */
  transition: background-size .3s ease-in; /* duration and timing style of animation */
}

a:hover::before {
  background-size: 100% 2px;
}
Code language: CSS (css)

Notice the use of absolute positioning, along with the top and bottom properties to ensure the pseudo-element expands to the height of its parent. You can view the above code in action in the following CodePen demo:

The look and animation of the underline is fairly customizable. For example, in the following CodePen demo, I’ve adjusted some of the customizable values to make the underline a little more unique:

Above I’ve modified the direction of the animated underline on hover along with the spacing and the size of the underline. I’ve also used a real two-color gradient instead of a solid colo for the animated underline.