EspañolAnimated link underline generator (CSS)
Choose the effect and hover (or Tab) over the links in the preview. The code uses background-size, which works on links that span several lines.
How to useLinks with an underline that moves
This paragraph has a short link and also a much longer link that may wrap onto two lines on a phone to test the effect.
Available in: 
Animated link underline generator (CSS): what it is for
An underline that animates on hover gives menu and text links a polished finish. Made with ::after, it only works on single-line links; this generator draws the line with background-image and animates background-size, which works even when the link wraps.
Choose between five effects (grow from the left, from the center, slide, highlighter and wavy), the color, the thickness and the duration. A thin line stays visible by default so the link stands out from the text, as WCAG 1.4.1 requires, and the effect also appears on keyboard focus.
How to use
- Choose the effect.
- Adjust the color, thickness and duration.
- Copy the CSS and add the class to your links.
When to use it
- Navigation menus.
- Links inside articles.
- Footers and link lists.
Frequently asked questions
Why use background instead of ::after?
With an ::after pseudo-element, the line only works on single-line links. By drawing the underline with background-image and animating background-size, the line follows the text even when the link wraps onto two lines.
Does the link still look like a link?
In the middle of a paragraph, a link must stand out from the text even without the mouse over it (WCAG 1.4.1). That is why the option to keep a thin line always visible is checked by default; the effect animates on top of it.
What about on phones?
Phones have no hover; the effect appears on focus and on tap. The visible base line makes sure links are recognized.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.