CSS Animation Example: The Underline Swish

"The Underline Swish" updates the classic hover underline by making it dynamically shoot out from the left and retract to the right when hovered over and off.

This trick uses a ::before pseudo-element and manipulates the transform-origin property in tandem with transform: scaleX(). In its default state, the origin is set to right, so when scaleX(0) shrinks it, it collapses to the right. On hover, we change the origin to left and scale it up to 1, causing it to "grow" from the left. When the user stops hovering, it reverts to right and collapses back to where it came from.

Here is the code to create the Underline Swish animation.

<!doctype html>
<title>Example</title>
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0;
}

nav {
    display: flex;
    gap: 30px;
}

.nav-link {
    font-size: 1.2rem;
    color: #333;
    text-decoration: none;
    position: relative;
    padding-bottom: 5px;
}

.nav-link::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background-color: #007bff;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
}

.nav-link:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .nav-link::before {
        transition: none;
    }
}
</style>

<nav>
    <a href="#" class="nav-link">Home</a>
    <a href="#" class="nav-link">About</a>
    <a href="#" class="nav-link">Services</a>
    <a href="#" class="nav-link">Contact</a>
</nav>

View Output

Accessibility Considerations

While subtle relative to full-page animations, sliding effects can still be an annoyance. Respecting the prefers-reduced-motion media query ensures the interaction remains accessible. prefers-reduced-motion is a CSS media feature used to detect if a user has enabled a setting on their device to minimize non-essential animation or motion. By removing the transition, the underline will simply snap into view instantly.

Here's what we used in our example:


@media (prefers-reduced-motion: reduce) {
    .nav-link::before {
        /* Disables the sliding animation, so the line appears instantly */
        transition: none;
    }
}