Baseline Sweep Text Effect

A baseline sweep text effect built with pure HTML and CSS that animates a visual line or highlight along the baseline of the text, creating a dynamic underline-style motion that emphasizes typography without relying on JavaScript or external libraries.

Usage

This component is ideal for interfaces where text emphasis should feel active and directional, such as section headings, navigation labels, call-to-action text, or highlighted phrases that benefit from motion-based focus rather than color changes alone.

Implementation

The sweep effect is achieved using CSS pseudo elements, transform animations, and controlled positioning at the text baseline, allowing a line or gradient to travel horizontally beneath the characters while keeping the structure lightweight and reusable.

HTML

<span class="text-baseline">
  Sweep Text
</span>

<span class="text-baseline">
  Sweep Text
</span>

CSS

.text-baseline {
  position: relative;
  font-size: 20px;
  font-weight: 700;
  color: #FF4646;
  padding-bottom: 0.2rem;
}

.text-baseline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #6366f1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.text-baseline:hover::after {
  transform: scaleX(1);
}

@media (prefers-color-scheme: dark) {
  .text-baseline {
    color: #e5e7eb;
  }

  .text-baseline::after {
    background: #818cf8;
  }
}

.text-baseline {
  position: relative;
  font-size: 20px;
  font-weight: 700;
  color: #FF4646;
  padding-bottom: 0.2rem;
}

.text-baseline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #6366f1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.text-baseline:hover::after {
  transform: scaleX(1);
}

@media (prefers-color-scheme: dark) {
  .text-baseline {
    color: #e5e7eb;
  }

  .text-baseline::after {
    background: #818cf8;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Animates along the text baseline
• Emphasizes typography through motion
• Keeps letterforms fully readable
• Designed for headings and highlighted text

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.