Skip to content

Link Underline Effects

Six animated link underline styles in pure CSS (slide, center, highlighter, ink fill, line swap and wave) that also work on links that wrap.

Also known as: animated link hover, link underline animation, hover underline styles, text link hover effects

Pure CSS Hover Effects Responsive #animation #hover-effect #links #navigation #typography #underline

Link Underline Effects live demo

Open in new tab

Pure CSS code (HTML, CSS)

Six animated link underline styles in pure CSS, shown as an editorial showcase with a sample navigation bar. Each style is a single modifier class on a normal <a> element, so you can drop it into navigation menus, blog posts, footers or any body text.

How it works

The root section.lu-showcase contains a .lu-head with the title and a nav.lu-nav, followed by the .lu-grid of article.lu-card demos. Every link has the base class .lu-link plus one effect modifier.

None of the effects use ::after or text-decoration. Each line is a linear-gradient drawn as a background-image with background-repeat: no-repeat. A hover animates background-size, and sometimes background-position, with a transition on .lu-link. Because the lines are backgrounds and box-decoration-break: clone is set, they follow the text across line breaks. Look at "field notes from the coast" in the first card: an ::after underline would only appear under the last line.

  • .lu-link--slide grows the accent line from the left. On mouse-out the position flips to the right, so the line leaves in the same direction. The nav uses it, and aria-current="page" keeps the current item underlined.
  • .lu-link--center opens from 50%.
  • .lu-link--marker raises a yellow highlighter from 0.2em to 0.62em tall.
  • .lu-link--fill floods the ink line to 100% height and turns the text cream.
  • .lu-link--swap shrinks the dark line to the right while a blue line grows in.
  • .lu-link--wave uses an inline SVG wave that scrolls with the lu-wave keyframes.

Customization

  • --lu-accent on .lu-showcase: the color of the slide and center lines and the eyebrow text. The wave color is the stroke inside the SVG data URI, %23d9481f.
  • --lu-accent-2: the incoming line and hover color of .lu-link--swap, and the focus outline color.
  • --lu-marker: the highlighter color of .lu-link--marker.
  • --lu-thickness: the line height for slide, center, fill and swap. 3px gives a bolder look.
  • --lu-speed: the duration of every transition.
  • --lu-faint: the resting hairline under slide and center links. Set it to transparent to hide lines until hover.
  • grid-template-columns in the .lu-grid media queries: one column on phones, two from 640px and three from 980px.

Use cases

  • Navigation menus: a sliding underline marks hovered and current items
  • Blog posts: highlighter and ink fill styles make inline links stand out in body text
  • Footers: center-out and swap underlines add polish to link lists
  • Long link text: the effects follow the text across line breaks instead of only the last line

Accessibility

All links are visibly marked at rest with a hairline, a marker stroke, a solid line or a wave, not by color alone. Every effect also runs on :focus-visible, and a 2px outline is added for keyboard users. The navigation is a labelled nav with aria-current="page" on the current item. The decorative card numbers are aria-hidden. With prefers-reduced-motion: reduce the transitions are removed, so the final states appear at once, and the wave stops moving. The ink fill switches the text to cream, which keeps the contrast high.

Usage notes

To use one effect in your own site, copy the .lu-link base rule and its modifier, and change --lu-* values or replace them with your own colors. The effects need no JavaScript and work in all current browsers.

Link Underline Effects at a glance

Framework
Pure CSS
Code
HTML, CSS
JavaScript
Not needed, CSS only
Dependencies
None
Layout
Responsive, works on mobile
Category
Hover Effects
License
Free for personal and commercial use

Questions about this template

Can I use the Link Underline Effects code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

There is nothing to install. Paste the HTML where the component should appear and add the CSS to your stylesheet. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. It is built with HTML and CSS only, so there is no JavaScript to load.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

No dependencies. Pure HTML, CSS and JavaScript.

Link Underline Effects – Pure CSS hover effects component screenshot
Link Underline Effects · Pure CSS Hover Effects

More Hover Effects

Image Hover Effects – Pure CSS hover effects preview

Image Hover Effects

Six pure CSS image hover effects with captions: zoom, grayscale to color, sliding panel, tilt, blur and frame, also revealed by keyboard focus.

Pure CSS Hover Effects