Strikethrough
Underline & Decoration · Animated · pure CSS
A colored line draws itself across the middle of the text, holds, then retracts — a looping strikethrough, set apart from the underlines.
CSS
/* Strikethrough — 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(257 20% 92%);
background-image: linear-gradient(hsl(257 90% 60%), hsl(257 90% 60%));
background-repeat: no-repeat;
background-position: left center;
background-size: 0% 3px;
animation: text-effect-strike 4.2s ease-in-out infinite;
}
@keyframes text-effect-strike {
0% { background-size: 0% 3px; }
40%, 65% { background-size: 100% 3px; }
100% { background-size: 0% 3px; background-position: right center; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Underline & Decoration
- Type
- Animated
- Browser support
- Animated background-size width on a centred line
- Capabilities
- pure