A text underline hover effect built with pure HTML and CSS that animates an underline when users interact with a link or text element. It enhances link visibility and interactive clarity without altering layout structure.
Usage
Use this component when navigation links or inline text require subtle hover emphasis, such as menus, footer links, article references, or call-to-action text elements.
Implementation
The effect is achieved using pseudo elements and controlled width transitions, allowing the underline to expand, slide, or fade smoothly. CSS manages animation timing and responsiveness for consistent behavior across devices.
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
- Built with pure HTML and CSS
- No JavaScript required
- Uses animated underline transitions
- Enhances text based interaction feedback
- Fully responsive and lightweight
- Suitable for links and navigation elements
- Easy to customize underline thickness and direction
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.