A plain static underline on a link is functional but unremarkable — a smooth animated underline that slides in from one side on hover adds a small but noticeable touch of polish to text links throughout a site.
Customize the underline color and animation speed with live controls, hover over the sample link to preview the sliding effect, then copy the CSS needed to apply the same animated underline to your own link elements.
The technique uses a CSS pseudo-element sized to zero width by default and transitioned to full width on hover, avoiding any JavaScript and working smoothly across all modern browsers.
Because everything runs locally in your browser, results appear instantly and nothing you type or upload is ever sent to a server.
Bookmark this page if you expect to use this tool regularly — it loads fast and behaves the same way every time, with no account needed.
This kind of task shows up constantly in everyday writing, coding, design, and admin work, which is exactly why a dedicated, focused tool saves so much back-and-forth.
A tool that does one job well, without a cluttered interface or unrelated features competing for attention, tends to be faster to use than a heavier all-in-one app.
If you find yourself needing this often, keeping this page open in a tab is usually faster than digging through a bigger software suite's menus.
Frequently asked questions
Does this work on any link, or just specific ones?
Apply the generated CSS class to any link element you want the effect on — it's a reusable class-based style rather than tied to one specific link.
Can the underline slide in from the right instead of the left?
Yes, adjust the `left` property to `right: 0` and reverse the transform direction in the generated CSS to have the underline animate in from the opposite side.