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. Note the comments, which explain the customizable parts:
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.