30 CSS Hover Effects 01 / 30

CSS Underline Draw Hover Effect

Six scoped link and heading hover styles that animate underlines from invisible to visible — left-to-right draw, center-out expand, two-tone dual-line, offset thick bar, dotted border, and gradient sweep — all driven by CSS custom properties and pseudo-element transforms.

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="hv-01">
  <div class="hv-01__grid">
    <div class="hv-01__cell">
      <a class="hv-01__link hv-01__link--ltr" href="#">Left-to-Right Draw</a>
      <span class="hv-01__label">scaleX · left origin</span>
    </div>
    <div class="hv-01__cell">
      <a class="hv-01__link hv-01__link--center" href="#">Center Expand</a>
      <span class="hv-01__label">scaleX · center origin</span>
    </div>
    <div class="hv-01__cell">
      <a class="hv-01__link hv-01__link--dual" href="#">Dual Line Sweep</a>
      <span class="hv-01__label">::before + ::after toward center</span>
    </div>
    <div class="hv-01__cell">
      <a class="hv-01__link hv-01__link--thick" href="#">Thick Bar Slide</a>
      <span class="hv-01__label">offset bold underbar</span>
    </div>
    <div class="hv-01__cell">
      <a class="hv-01__link hv-01__link--dot" href="#">Dotted Border Grow</a>
      <span class="hv-01__label">border-bottom + scaleX</span>
    </div>
    <div class="hv-01__cell">
      <a class="hv-01__link hv-01__link--grad" href="#">Gradient Sweep</a>
      <span class="hv-01__label">background-size animation</span>
    </div>
  </div>
</div>
.hv-01,.hv-01 *,.hv-01 *::before,.hv-01 *::after{box-sizing:border-box;margin:0;padding:0}
.hv-01 ::selection{background:#f72585;color:#fff}
.hv-01{
  --bg:#0a0a0f;
  --text:#e8e6f0;
  --dim:#666;
  --accent:#f72585;
  --cyan:#4cc9f0;
  --gold:#ffd60a;
  --green:#06d6a0;
  --orange:#fb5607;
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:60px 24px;
}
.hv-01__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px 60px;
  max-width:900px;
  width:100%;
}
.hv-01__cell{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:40px 24px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
}
.hv-01__label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);text-align:center}

/* shared link base */
.hv-01__link{
  font-size:1.25rem;font-weight:600;color:var(--text);
  text-decoration:none;position:relative;display:inline-block;
  padding-bottom:4px;
}

/* 1 — left-to-right draw */
.hv-01__link--ltr::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.hv-01__link--ltr:hover::after{transform:scaleX(1)}

/* 2 — center expand */
.hv-01__link--center::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--cyan);
  transform:scaleX(0);transform-origin:center;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.hv-01__link--center:hover::after{transform:scaleX(1)}

/* 3 — dual line sweep */
.hv-01__link--dual::before,
.hv-01__link--dual::after{
  content:'';position:absolute;left:0;width:100%;height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.hv-01__link--dual::before{bottom:6px;transform-origin:right}
.hv-01__link--dual::after{bottom:0;transform-origin:left}
.hv-01__link--dual:hover::before,
.hv-01__link--dual:hover::after{transform:scaleX(1)}

/* 4 — thick offset bar (highlighter effect).
       The :hover swaps text to var(--bg) so it reads as dark text on
       a bright green highlight. For the bar to land BEHIND the text
       but ABOVE the cell background, the link itself must create a
       stacking context — otherwise z-index:-1 on the ::after escapes
       the link and lands behind the cell's translucent fill, hiding
       the entire highlight. isolation:isolate creates that local
       stacking context without affecting the link's positioning.
       Bar height bumped from 6px to a fuller block so it visually
       reads as a highlighter rather than a thin underline; bottom
       offset adjusted so the bar covers the full text height. */
.hv-01__link--thick{isolation:isolate}
.hv-01__link--thick::after{
  content:'';position:absolute;left:-6px;bottom:0;
  width:calc(100% + 12px);height:100%;
  background:var(--green);border-radius:3px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  z-index:-1;opacity:.85;
}
.hv-01__link--thick:hover::after{transform:scaleX(1)}
.hv-01__link--thick:hover{color:var(--bg)}

/* 5 — dotted border grow */
.hv-01__link--dot::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;
  border-bottom:2px dotted var(--orange);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s ease;
}
.hv-01__link--dot:hover::after{transform:scaleX(1)}
.hv-01__link--dot:hover{color:var(--orange)}

/* 6 — gradient background-size sweep */
.hv-01__link--grad{
  background-image:linear-gradient(90deg,var(--accent),var(--cyan));
  background-repeat:no-repeat;
  background-size:0% 2px;
  background-position:left bottom;
  transition:background-size .4s cubic-bezier(.4,0,.2,1),color .3s;
}
.hv-01__link--grad:hover{
  background-size:100% 2px;
  color:var(--accent);
}

@media(max-width:680px){.hv-01__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.hv-01__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .hv-01__link::before,.hv-01__link::after{transition:none!important}
  .hv-01__link--grad{transition:none!important}
}

How this works

Every variant places a ::after pseudo-element beneath the text with height set to the line thickness and width: 100% (or 0) controlled via transform: scaleX(). The default transform-origin: left makes the line grow left-to-right on hover; swapping to transform-origin: center gives a symmetric expand from the midpoint. Transition easing (cubic-bezier values) controls whether the line snaps in or eases out.

The dual-line variant stacks ::before and ::after at offset Y positions with opposite transform-origin values so they sweep toward each other. The gradient sweep uses background-size animated from 0% 2px to 100% 2px on a background-position: left bottom via a background-image: linear-gradient applied directly on the element — no pseudo-element needed.

Customize

  • Adjust line thickness by changing height: 2px on the ::after element — try 4px for a bolder editorial feel.
  • Change draw direction by swapping transform-origin: left to right so the line retracts on hover-out from the same side it entered.
  • Add a colour shift on hover by transitioning color simultaneously with the underline transform on the parent anchor.
  • Offset the underline vertically with bottom: -4px on the pseudo-element to create breathing room between text baseline and line.
  • Combine the center-out expand with border-radius: 2px on the pseudo-element for a pill-shaped underline that reads as a highlight.

Watch out for

  • display: inline elements ignore pseudo-element height — set display: inline-block or display: block on the anchor so the ::after positions correctly.
  • Background-gradient underlines don't work with text-decoration — they require text-decoration: none and rely entirely on background shorthand.
  • Safari clips ::after pseudo-elements on overflow: hidden parents — remove the overflow constraint or move the underline inside a wrapper span.

Browser support

ChromeSafariFirefoxEdge
60+ 12+ 60+ 60+

All variants are baseline CSS — no flags or prefixes needed in any modern browser.

More from 30 CSS Hover Effects

CSS Text Glitch Hover EffectCSS Letter Spacing Expand Hover EffectCSS Gradient Text Reveal Hover EffectCSS Split Text Hover EffectCSS Neon Glow Text Hover EffectCSS Magnetic Liquid Button Hover EffectCSS Border Draw Hover EffectCSS Shimmer Shine Button Hover EffectCSS Fill Wipe Button Hover EffectCSS 3D Press Button Hover EffectCSS Ripple Button Hover EffectCSS 3D Tilt Card Hover Effect
View the full collection →

Search CodeFronts

Loading…

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