Animated underline link

A link underline that grows from left to right on hover, drawn with a background gradient.

link
underline
hover
animation
effect

Link color#7c5cff

Underline2px

Speed300ms

HTML

<a href="#" class="fancy-link">Hover this link</a>

CSS

:root {
    --link: #7c5cff;
    --thickness: 2px;
    --speed: 300ms;
}

.fancy-link {
    color: var(--link);
    text-decoration: none;
    font-weight: 600;

    /* The underline is a gradient "image" we grow from 0 to full width */
    background-image: linear-gradient(var(--link), var(--link));
    background-size: 0% var(--thickness);
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--speed) ease;
}

.fancy-link:hover,
.fancy-link:focus-visible {
    background-size: 100% var(--thickness);
}

How it works

Instead of text-decoration, the underline is a tiny gradient background pinned to the bottom of the text. It starts at background-size: 0% width and animates to 100% on hover, so the line sweeps in from the left.

Using background-size (not width) means it animates smoothly and wraps correctly across multiple lines.
:focus-visible is included so keyboard users get the same affordance.
Swap background-position to 100% 100% to make it grow from the right.