CSS Underline Animation: The High-Performance Guide (60 FPS)

One of the most elegant ways to increase user interaction on your website is through underline animations. However, we treat these not just as visual ornaments, but as performance-focused UX elements. Let's explore techniques that align with how modern browsers work, ensure your site doesn't slow down, and look flawless on every device.

Critical: For maximum performance, always use transform: scaleX instead of width. This method bypasses the browser's layout engine, allowing the animation to run at a buttery-smooth 60 FPS.

Details always make the difference in web design. That subtle line appearing when hovering over a menu item or link makes the visitor feel the system is alive. However, many developers still implement this effect using legacy methods, unknowingly impacting site speed. Here are the most technically and aesthetically correct approaches for you.

Why Use Transform Instead of Width?

In the classic method, we change the width value to expand the line from 0% to 100%. However, this forces the browser to recalculate the layout for every single frame, causing layout thrashing and potential lag.

Instead, using transform: scaleX(0) is a much more professional approach. Transform operations are handled by the GPU (Graphics Processing Unit), ensuring your website performs smoothly without burdening the CPU. If you want to fine-tune the size and positioning of your elements further, checking out our guide on CSS units will help you optimize your page layout.

Method 1: The ScaleX Technique (For Single-Line Elements)

Think of this method as having a line that already exists but is squashed to zero horizontally. When the mouse hovers, we simply stretch it back to its original size. This technique yields the best results for navigation menus and buttons.

HTML Structure

<a href="#" class="hover-underline">Our Services</a>

CSS Codes

.hover-underline {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding-bottom: 4px;
}
.hover-underline::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #00ff00;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}
.hover-underline:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

The beauty of this code lies in your ability to control the flow of the line, left-to-right or right-to-left, simply by changing the transform-origin property. These small touches demonstrate to your users that you care about the feel of the experience.

Method 2: The Background Technique (For Multi-Line Text)

If you apply the animation to a link embedded within a long paragraph, the pseudo-element (::after) method unfortunately breaks at line ends. The line tries to box the text rather than following the flow of the sentence, ruining the visual.

To overcome this, use the multi-line-underline smart technique, which utilizes background properties:

HTML Structure

<p>
  Using <a href="#" class="multi-line-underline">modern CSS animation techniques</a> 
  to increase your website speed is critically important for user experience.
</p>

CSS Codes

.multi-line-underline {
    text-decoration: none;
    background-image: linear-gradient(#00ff00, #00ff00);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 0.3s ease-in-out;
}
.multi-line-underline:hover {
    background-size: 100% 2px;
}

This method provides a flawless look specifically for long links inside blog posts, allowing the underline to appear under each line individually. You can even combine this with custom colors in Tailwind CSS to match your brand identity perfectly.

Accessibility and Mobile Experience Recommendations

Since mobile devices lack a physical mouse, the hover state doesn't exist in the same way. Therefore, structure underline animations purely as visual feedback; never hide critical information behind this effect. To prevent animations from getting stuck on touch screens, consider using media queries to disable these effects or default to a static underline on mobile.

The structure you build here is both SEO-friendly and elevates user experience. Avoiding unnecessary JavaScript libraries for simple effects and solving them with pure CSS positively impacts your project's overall speed and authority.