Animated Underline

This is a link

How to create an animated gradient underline..

This is done using a background-image on the anchor tag element and reducing it’s height to the thickness you want. Here it’s generous 9px high. The background-repeat property is set to no-repeat and background-position is set to left bottom.

Extra padding is added to the anchor element which help position the gradient. Even though it’s an inline element you CAN add padding. What’s more the padding on inline elements won’t affect the layout.

The animation is achieved by setting background-size to 0% 9px on the element so it has no width. Then, on :hover the size is set to background-size: 100% 9px. A transition expands this width over time.

The CSS

..looks like this:

a {
    padding-bottom: 0.25em;
    font-size: 1.5em;
    background-image: linear-gradient(to right, fuchsia 0% 1%, blue 60% 100%);
    background-size: 0% 9px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: all 0.3s;
}
a:hover {
    background-size: 100% 9px;
}