Cursor-Follow Underline Draw — Link Hover Snippet

<div class="lu-stage">
  <p class="lu-hint">Move your cursor across a link — the underline draws in from wherever you entered</p>
  <nav class="lu-nav">
    <a href="#" class="lu-link">Home</a>
    <a href="#" class="lu-link">Products</a>
    <a href="#" class="lu-link">Documentation</a>
    <a href="#" class="lu-link">Pricing</a>
    <a href="#" class="lu-link">Contact</a>
  </nav>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #0b1120; display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.lu-stage { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 24px; }
.lu-hint { font-size: 13px; color: #64748b; text-align: center; max-width: 340px; }
.lu-nav { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; }

.lu-link {
  position: relative;
  color: #e2e8f0;
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  padding-bottom: 4px;
  display: inline-block;
}

/* Two pseudo-elements act as a left-growing and right-growing underline half,
   each anchored at the cursor's entry x-position via a CSS custom property. */
.lu-link::before,
.lu-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 2px;
  background: #38bdf8;
  width: 0;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.lu-link::before { right: calc(100% - var(--lu-x, 50%)); }
.lu-link::after { left: var(--lu-x, 50%); }

.lu-link:hover::before,
.lu-link:hover::after { width: 50%; }
/* width 50% of the link box on each side of --lu-x draws the line outward
   from the entry point to both edges simultaneously. */
.lu-link::before { width: 0; }
.lu-link::after { width: 0; }
.lu-link:hover::before { width: var(--lu-left-w, 0); }
.lu-link:hover::after { width: var(--lu-right-w, 0); }

// The underline is split into a left half and a right half, both anchored at
// the x-position where the cursor entered the link. On mouseenter we compute
// that position as a percentage and set the exact pixel widths each half needs
// to travel to reach its own edge, so the line visibly "draws itself" outward
// from under the cursor rather than sliding in from a fixed side.
document.querySelectorAll('.lu-link').forEach(function (link) {
  link.addEventListener('mouseenter', function (e) {
    var rect = link.getBoundingClientRect();
    var entryX = e.clientX - rect.left;
    var pct = Math.max(0, Math.min(100, (entryX / rect.width) * 100));

    link.style.setProperty('--lu-x', pct + '%');
    link.style.setProperty('--lu-left-w', entryX + 'px');
    link.style.setProperty('--lu-right-w', (rect.width - entryX) + 'px');
  });

  link.addEventListener('mouseleave', function () {
    link.style.setProperty('--lu-left-w', '0px');
    link.style.setProperty('--lu-right-w', '0px');
  });
});