Center Underline
Underline & Decoration · Animated · pure CSS
A solid underline bar grows outward from the center to full width, holds, then retracts. Origin-from-center sets it apart from slide and dash underlines.
How it works
Center 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
Center Underline exposes 4 dedicated controls — Hue, Thickness, Gap 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
/* Center Underline — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Major Mono Display', monospace (load from Google Fonts).
*/
.text-effect {
font-family: 'Major Mono Display', monospace;
font-weight: 900;
letter-spacing: 2px;
text-transform: none;
}
.text-effect {
display: inline-block;
color: hsl(193 25% 92%);
padding-bottom: 17px;
background-image: linear-gradient(hsl(193 90% 62%), hsl(193 90% 62%));
background-repeat: no-repeat;
background-position: center 100%;
background-size: 0% 9px;
animation: text-effect-grow 3.2s ease-in-out infinite;
}
@keyframes text-effect-grow {
0% { background-size: 0% 9px; }
40%, 60% { background-size: 100% 9px; }
100% { background-size: 0% 9px; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Underline & Decoration
- Type
- Animated
- Browser support
- Animated background-size width from centre
- Capabilities
- pure