Slide Underline
Underline & Decoration · Animated · pure CSS
A gradient underline bar grows in from the left beneath the text. Clean, modern link and heading emphasis.
How it works
Slide Underline is an animated underline & decoration text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Slide Underline exposes 3 dedicated controls — Hue, Thickness and Speed — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* Slide Underline — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Space Mono', monospace (load from Google Fonts).
*/
.text-effect {
font-family: 'Space Mono', monospace;
font-weight: 900;
letter-spacing: 4px;
text-transform: uppercase;
}
.text-effect {
position: relative;
display: inline-block;
color: hsl(95 25% 96%);
padding-bottom: 8px;
}
.text-effect::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 5px;
border-radius: 5px;
background: hsl(95 50% 58%);
transform-origin: left center;
transform: scaleX(0);
animation: text-effect-grow 0.9s ease-in-out forwards;
}
.text-effect:hover::after {
animation-name: text-effect-grow-r;
}
@keyframes text-effect-grow {
0% { transform: scaleX(0); }
100% { transform: scaleX(1); }
}
@keyframes text-effect-grow-r {
0% { transform: scaleX(0); }
100% { transform: scaleX(1); }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Underline & Decoration
- Type
- Animated
- Browser support
- ::after pseudo-element + transform animation
- Capabilities
- pure