This text underline hover effect animates an underline smoothly, ideal for links and navigation menus.
HTML
<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%;
}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.
