Underline Motion Text Effect

An underline motion text effect built with pure HTML and CSS that animates a line beneath the text to create a sense of movement and emphasis, drawing attention without altering the letterforms or relying on JavaScript or external libraries.

Usage

This component is well suited for interfaces where text should feel interactive without changing color or size, such as navigation links, section headings, inline calls to action, or labels that need subtle visual reinforcement.

Implementation

The motion underline is created using CSS pseudo elements, transform based animations, and transition timing, allowing the line to slide, grow, or sweep beneath the text while keeping the content layout stable and reusable.

HTML

<span class="text-underline-motion">
  Hover Label
</span>

<span class="text-underline-motion">
  Hover Label
</span>

CSS

.text-underline-motion {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

.text-underline-motion::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms ease;
}

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

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

.text-underline-motion {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
}

.text-underline-motion::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms ease;
}

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

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

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Animates only the underline layer
• Leaves text shape and spacing unchanged
• Works for links and headings
• Designed for clean interaction cues

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.