Marching Underline
Underline & Decoration · Animated · pure CSS
A dashed underline rule that marches steadily beneath the text via an animated background position. The text stays fully legible throughout.
How it works
Marching 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
Marching Underline exposes 4 dedicated controls — Hue, Dash, 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
/* Marching Underline — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Bricolage Grotesque', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
letter-spacing: 0px;
text-transform: none;
}
.text-effect {
display: inline-block;
color: hsl(93 25% 92%);
padding-bottom: 8px;
background-image: repeating-linear-gradient(90deg, hsl(93 90% 62%) 0 12px, transparent 12px 24px);
background-size: 24px 4px;
background-position: 0 100%;
background-repeat: repeat-x;
animation: text-effect-march 2.6s linear infinite;
}
@keyframes text-effect-march {
to { background-position: 24px 100%; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Underline & Decoration
- Type
- Animated
- Browser support
- Animated background-position on a repeating dash underline
- Capabilities
- pure