Thick Underline Link Hover
A real text-decoration underline that tucks up under the letters and thickens into a marker bar on hover. It animates native properties, so it wraps across lines like any link.
Also known as: text decoration thickness animation, underline offset hover, native underline animation.
HTML
<a class="hfx-link-thick-underline" href="#">Read the changelog</a>
CSS
.hfx-link-thick-underline {
--c: var(--hfx-color, #3b82f6);
color: inherit;
font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
text-decoration: underline color-mix(in srgb, var(--c) 50%, transparent);
text-decoration-thickness: 0.07em;
text-underline-offset: 0.3em;
text-decoration-skip-ink: none;
transition: text-decoration-thickness 0.3s ease, text-underline-offset 0.3s ease, text-decoration-color 0.3s ease;
}
.hfx-link-thick-underline:is(:hover, :focus-visible) {
text-decoration-color: var(--c);
text-decoration-thickness: 0.3em;
text-underline-offset: 0.08em;
}
@media (prefers-reduced-motion: reduce) {
.hfx-link-thick-underline, .hfx-link-thick-underline *, .hfx-link-thick-underline::before, .hfx-link-thick-underline::after, .hfx-link-thick-underline *::before, .hfx-link-thick-underline *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<a href="#" class="text-xl font-semibold underline decoration-blue-500/50 decoration-1 underline-offset-[6px] transition-all duration-300 [text-decoration-skip-ink:none] hover:decoration-blue-500 hover:decoration-[6px] hover:underline-offset-2"> Read the changelog </a>
Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.