Text Underline Hover Effect

This text underline hover effect animates an underline smoothly, ideal for links and navigation menus.

HTML

<a href="#" class="ss-link">Hover Text</a>

<a href="#" class="ss-link">Hover Text</a>

CSS

.ss-link{
  position:relative;
  text-decoration:none;
  color:#0f172a;
}

.ss-link::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:#2563eb;
  transition:.3s;
}

.ss-link:hover::after{
  width:100%;
}

.ss-link{
  position:relative;
  text-decoration:none;
  color:#0f172a;
}

.ss-link::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-4px;
  width:0;
  height:2px;
  background:#2563eb;
  transition:.3s;
}

.ss-link:hover::after{
  width:100%;
}

Notes

• Smooth underline animation
• Ideal for navigation
• Improves UX

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.