A text hover underline effect built with pure HTML and CSS that introduces an animated underline when the user hovers over text, providing a clear visual cue of interactivity without changing the text color or relying on JavaScript.
Usage
This component is ideal for interfaces where links or labels should feel interactive without heavy styling, such as navigation menus, inline links, button like text, or call-to-action phrases that need subtle but clear hover feedback.
Implementation
The underline animation is implemented using CSS pseudo elements, transform scaling, and transition timing, allowing a line to grow or slide into view beneath the text while keeping the typography and layout stable.
HTML
<span class="ss-text">Hover Me</span>CSS
.ss-text{
position:relative;
font-size:18px;
color:#0f172a;
text-decoration:none;
}
.ss-text::after{
content:'';
position:absolute;
left:0;
bottom:-4px;
width:0;
height:2px;
background:#FF0000;
transition:.3s;
}
.ss-text:hover::after{
width:100%;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Adds interaction feedback without changing text color
- Keeps text readable and layout unchanged
- Works well for links and navigation items
- Designed for clean, minimal UI styles
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.