6 Pure CSS1 with JSPublished 2026-10-05Free · no sign-up
Seven link styles: an underline that grows in from the left and leaves to the right, a highlight that rises behind the words, a call to action with a moving arrow, a native underline that shifts and thickens, an external link marker, a nav with a sliding pill and a dotted underline for glossary terms.
The underline grows from the left on hover and leaves to the right when the pointer moves away, which feels like it passed through. The trick is changing transform-origin between the two states, so each direction scales from a different side.
View code
<p class="lk1">Read our <a href="#guide">shipping guide</a> before you order.</p>
A thin coloured underline at rest becomes a full highlight behind the text on hover, because the background gradient's height animates from 2px to 100 percent. The text colour stays dark on the pale highlight for contrast.
View code
<p class="lk2">Browse the <a href="#archive">full archive</a> or <a href="#search">search</a>.</p>
A standalone call-to-action link whose arrow nudges right on hover, hinting at going somewhere. The arrow is an aria-hidden span so the accessible name is just the words, and the movement is a transform on the arrow only.
View code
<a class="lk3" href="#case-study">Read the case study <span aria-hidden="true">→</span></a>
A native text underline that moves closer and thickens on hover, using text-underline-offset and text-decoration-thickness. Real underlines respect descenders with text-decoration-skip-ink, which a pseudo-element underline cannot do.
View code
<p class="lk4">Questions? <a href="#help">Visit the help centre</a> or reply to any email.</p>
Links to other sites get a small arrow-out icon that lifts on hover, added automatically with an attribute selector on href^="http". A visually hidden note says it opens another website, which matters when the link leaves your site.
View code
<p class="lk5">Built with <a href="https://developer.mozilla.org/">MDN's guides<span class="sr"> (external site)</span></a> as reference.</p>
A pill-shaped highlight slides between nav links to follow the hovered or focused one, and settles on the current page when the pointer leaves. A few lines of script measure the link and move one absolutely positioned pill with transform.
var nav = document.querySelector('.lk6'), pill = nav.querySelector('.pill'), cur = nav.querySelector('[aria-current]');
function to(a) { pill.style.width = a.offsetWidth + 'px'; pill.style.transform = 'translateX(' + a.offsetLeft + 'px)'; }
nav.querySelectorAll('a').forEach(function (a) { a.addEventListener('mouseenter', function () { to(a); }); a.addEventListener('focus', function () { to(a); }); });
nav.addEventListener('mouseleave', function () { to(cur); }); nav.addEventListener('focusout', function (e) { if (!nav.contains(e.relatedTarget)) to(cur); });
to(cur);
07. Dotted Underline Turns Solid
LinkGlossary
A glossary-style term with a dotted underline that turns solid and changes colour on hover, a convention readers recognise as a definition link. It uses text-decoration-style, so it wraps across lines correctly, unlike a border-bottom.
View code
<p class="lk7">Our checkout passes <a href="#glossary-pci">PCI DSS</a> checks every quarter.</p>
Inside a paragraph, colour alone is not enough to mark a link for people who cannot tell colours apart. Keep an underline at rest, or a 3:1 contrast difference with the surrounding text plus a hover change.
Native underlines are smarter
text-decoration skips descenders with text-decoration-skip-ink and wraps across lines. Tune it with text-underline-offset and text-decoration-thickness before reaching for a pseudo-element.
Direction from transform-origin
To make an underline grow from the left and leave to the right, set transform-origin: left on hover and right at rest. The browser scales from whichever side the current state names.
Say when a link leaves the site
A small arrow-out icon added with a[href^="http"]::after shows external links, and hidden text such as external site tells screen reader users too.
Frequently asked questions
Should links open in a new tab?
Usually not. Let people choose; if you must, say so in the link text.
What about visited links?
Style :visited with a slightly different colour on content-heavy sites; it helps readers track where they have been.
Do the effects work for focus?
Yes. Every hover style also applies on :focus-visible, with a visible outline.