OneTaskBy Tim King · Updated
Link Underline Animation
Slide, Grow, Sweep and Highlight Hover Underlines for Links
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Link Underline Animation works
This link underline animation generator draws a line under a link that animates in when you hover or tab to it. Choose a slide, a grow from the centre, a sweep that exits the other side or a highlighter stroke, then copy the HTML and CSS.
An animated underline makes links feel responsive without changing the layout, and it works on any text length because the line is sized to the link itself.
How the link underline animation works
The line is an ::after layer stretched across the bottom of the link and squashed to zero width with
transform: scaleX(0). On hover and keyboard focus it scales to full width. The transform-origin
decides where it grows from, and Slide through swaps the origin on hover so the line leaves from the
opposite side.
Highlighter style
The highlighter makes the layer taller and puts it behind the text with z-index: -1, so it looks like
a marker pen stroke across the lower half of the words. Use a light colour so the text stays readable.
FAQ
Does the underline work on links that wrap onto two lines?
Only the last line gets the line, because the layer is positioned against the whole inline box. For multi-line links, animating background-size on a linear gradient underline is the usual alternative.
Is the animated underline accessible?
Yes. The same rule runs on :focus-visible, so keyboard users see the line when they tab to the link. Keep a static underline or other cue on body text links so they are recognisable before hover.
How do I use it on all links on my site?
Rename the .ul-link class in the copied CSS to a selector such as nav a, or add the class to each link. The rules only need the link to be positioned relatively.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Hover Effect Builder
Build animated hover effects for buttons and links.
Text Highlight Effect
Style a highlighter-pen mark on key words and copy the CSS.
CSS Border Generator
Build a border shorthand with any style, side and radius.
CSS Button Generator
Design a button with hover, focus and disabled states.
Gradient Text Generator
Fill headline text with a CSS gradient and copy the code.