22 CSS Transition Effects 14 / 22

Underline Animation Hover

Ten underline variants: left-grow, center-out, RTL, thick bar, double line, fill-from-bottom, dot fade, strikethrough, rainbow gradient and fade-up.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="wrap">
  <div class="hero">
    <h1>Under<em>line</em><br>Animations</h1>
    <p>Ten CSS underline transition effects — the most typographically considered hover system for links, navigation and headings.</p>
  </div>

  <span class="sl">10 underline variants — hover each</span>
  <div class="inline-demo">
    <a class="ul-base ul-grow" href="#">Left grow</a>
    <a class="ul-base ul-center" href="#">Center out</a>
    <a class="ul-base ul-rtl" href="#">Right to left</a>
    <a class="ul-base ul-thick" href="#">Thick bar</a>
    <a class="ul-base ul-double" href="#">Double line</a>
    <a class="ul-base ul-fill" href="#">Fill behind</a>
    <a class="ul-base ul-dot" href="#">Dot fade in</a>
    <a class="ul-base ul-strike" href="#">Strikethrough</a>
    <a class="ul-base ul-rainbow" href="#">Rainbow</a>
    <a class="ul-base ul-fade" href="#">Fade up</a>
  </div>

  <span class="sl">Navigation with center-out</span>
  <nav class="nav-demo">
    <div class="nav-link ul-base ul-center act">Editorial</div>
    <div class="nav-link ul-base ul-center">Culture</div>
    <div class="nav-link ul-base ul-center">Design</div>
    <div class="nav-link ul-base ul-center">Technology</div>
    <div class="nav-link ul-base ul-center">Archive</div>
  </nav>

  <span class="sl">Article links — fill-from-bottom highlight</span>
  <p class="article-body">
    We spent three weeks in <a class="ul-base ul-fill" href="#" style="--ul:#fef08a">rural Oaxaca</a>, watching the way light falls at six in the evening across the valley. Every designer should experience that quality of warmth at least once — it informs how you approach <a class="ul-base ul-fill" href="#">colour theory</a> forever. The trip also introduced us to <a class="ul-base ul-fill" href="#">Zapotec textile traditions</a>, whose geometric logic rhymes unexpectedly with the grid systems we reach for daily.
  </p>

  <span class="sl">Article cards — thick underline on heading</span>
  <div class="link-grid">
    <div class="link-card"><div class="lc-cat">Design</div><h3><a class="ul-base ul-thick" href="#" style="--ul:#fbbf24">The Grid Is a Moral Argument</a></h3><div class="meta">Apr 2026 · 8 min read</div></div>
    <div class="link-card"><div class="lc-cat">Technology</div><h3><a class="ul-base ul-thick" href="#" style="--ul:#c084fc">WebGPU and the End of JS Bottlenecks</a></h3><div class="meta">Mar 2026 · 12 min read</div></div>
    <div class="link-card"><div class="lc-cat">Culture</div><h3><a class="ul-base ul-thick" href="#" style="--ul:#86efac">Post-Digital Craft Movements</a></h3><div class="meta">Feb 2026 · 6 min read</div></div>
    <div class="link-card"><div class="lc-cat">Editorial</div><h3><a class="ul-base ul-thick" href="#" style="--ul:#f9a8d4">The Last Magazine Issue</a></h3><div class="meta">Jan 2026 · 10 min read</div></div>
  </div>

  <span class="sl">Hero headings — rainbow underline</span>
  <div class="type-scale">
    <h2 class="ul-base ul-rainbow">Exhibitions</h2>
    <h2 class="ul-base ul-rainbow">Collections</h2>
    <h2 class="ul-base ul-rainbow">Publications</h2>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;1,300;1,600&family=Jost:wght@300;400;500;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Jost',sans-serif;background:#faf9f7;color:#1a1a1a;padding:60px 24px;min-height:100vh}
.wrap{max-width:1100px;margin:0 auto}
.hero{padding:80px 0 60px;border-bottom:1px solid #e5e0d8}
.hero h1{font-family:'Cormorant Garamond';font-size:clamp(3rem,9vw,6.5rem);font-weight:300;line-height:.9;letter-spacing:-.03em;margin-bottom:24px}
.hero h1 em{font-style:italic}
.hero p{font-size:1rem;color:#888;max-width:50ch;line-height:1.7}
.sl{font-size:.65rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#aaa;margin-bottom:12px;display:block;margin-top:56px}

/* ─────────────────────────── */
/* All underline variants */
/* ─────────────────────────── */
.ul-base{display:inline-block;position:relative;cursor:pointer;text-decoration:none;color:inherit}

/* 1 — left to right grow */
.ul-grow::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:currentColor;transition:width .3s cubic-bezier(.7,0,.2,1)}
.ul-grow:hover::after{width:100%}

/* 2 — center out */
.ul-center::after{content:'';position:absolute;left:50%;right:50%;bottom:-2px;height:2px;background:currentColor;transition:left .3s cubic-bezier(.7,0,.2,1),right .3s cubic-bezier(.7,0,.2,1)}
.ul-center:hover::after{left:0;right:0}

/* 3 — right to left */
.ul-rtl::after{content:'';position:absolute;right:0;bottom:-2px;width:0;height:2px;background:currentColor;transition:width .3s cubic-bezier(.7,0,.2,1)}
.ul-rtl:hover::after{width:100%}

/* 4 — thick chunky highlight */
.ul-thick::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:4px;background:var(--ul,#fbbf24);transition:width .4s cubic-bezier(.7,0,.2,1)}
.ul-thick:hover::after{width:100%}

/* 5 — double line slide */
.ul-double::before,.ul-double::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:currentColor;transition:width .3s cubic-bezier(.7,0,.2,1)}
.ul-double::before{bottom:-6px;transition-delay:.08s}
.ul-double:hover::before,.ul-double:hover::after{width:100%}

/* 6 — fill from bottom (background highlight) */
.ul-fill{overflow:hidden}
.ul-fill::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:0;background:var(--ul,#fef08a);z-index:-1;transition:height .35s cubic-bezier(.7,0,.2,1)}
.ul-fill:hover::before{height:80%}

/* 7 — dot underline grows */
.ul-dot{border-bottom:2px dotted transparent;transition:border-color .3s}
.ul-dot:hover{border-color:currentColor}

/* 8 — strikethrough on hover */
.ul-strike::after{content:'';position:absolute;left:50%;top:50%;width:0;height:2px;background:currentColor;transition:left .3s,right .3s,width .3s}
.ul-strike:hover::after{left:0;width:100%}

/* 9 — rainbow gradient underline */
.ul-rainbow::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:3px;background:linear-gradient(90deg,#f97316,#ec4899,#a78bfa,#38bdf8,#34d399);transition:width .4s cubic-bezier(.7,0,.2,1)}
.ul-rainbow:hover::after{width:100%}

/* 10 — fade on scroll underline (always visible, fades) */
.ul-fade{border-bottom:1px solid rgba(0,0,0,.2);transition:border-color .3s}
.ul-fade:hover{border-color:currentColor}

/* ─────────────────────────── */
/* Showcase layouts */
/* ─────────────────────────── */
.inline-demo{display:flex;flex-wrap:wrap;gap:32px;font-size:1.2rem;font-weight:500;margin-bottom:48px}
.nav-demo{display:flex;gap:0;flex-wrap:wrap;margin-bottom:48px;border-bottom:1px solid #e5e0d8}
.nav-link{padding:16px 24px;font-size:.95rem;font-weight:500;color:#888;cursor:pointer;position:relative}
.nav-link.ul-center::after{height:3px;background:#1a1a1a;bottom:0}
.nav-link:hover,.nav-link.act{color:#1a1a1a}
.article-body{max-width:700px;font-family:'Cormorant Garamond';font-size:1.3rem;line-height:1.8;color:#333;margin-bottom:48px}
.article-body a{--ul:#fef08a}
.link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-bottom:48px}
.link-card{padding:24px;background:#fff;border:1px solid #e5e0d8;border-radius:12px}
.link-card .lc-cat{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#aaa;margin-bottom:8px}
.link-card h3{font-family:'Cormorant Garamond';font-size:1.6rem;font-weight:600;line-height:1.1;margin-bottom:8px}
.link-card h3 a{--ul:#fbbf24}
.link-card .meta{font-size:.78rem;color:#aaa}

/* type scale showcase */
.type-scale{display:flex;flex-direction:column;gap:16px;margin-bottom:48px}
.type-scale h2{font-family:'Cormorant Garamond';font-size:clamp(2rem,6vw,4rem);font-weight:300;letter-spacing:-.02em;cursor:pointer;display:inline-block}

@media (prefers-reduced-motion:reduce){.ul-base::before,.ul-base::after{transition:none !important}.ul-dot,.ul-fade{transition:none !important}}

More from 22 CSS Transition Effects

Glassmorphism Hover TransitionSlide-In Animation on ScrollFade In Fade Out TransitionLoading Skeleton TransitionModal Open Close TransitionPage Transition EffectRipple Effect on ClickNumber Counter AnimationCard Tilt 3D HoverStaggered List AnimationCursor Trail EffectMagnetic Button Effect
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →