Highlighter
Underline & Decoration · Animated · pure CSS
A marker highlight sweeps in behind the text like a felt-tip pen. Draws attention to a phrase with a hand-made feel.
CSS
/* Highlighter — 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: 400;
letter-spacing: 8px;
text-transform: uppercase;
}
.text-effect {
display: inline;
color: hsl(170 30% 8%);
padding: 0 0.12em;
background-image: linear-gradient(hsl(170 95% 60% / 0.85), hsl(170 95% 60% / 0.85));
background-repeat: no-repeat;
background-position: 0 56%;
background-size: 0% 44%;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
animation: text-effect-wipe 2.2s ease-out infinite alternate;
}
@keyframes text-effect-wipe {
0% { background-size: 0% 44%; }
60%, 100% { background-size: 100% 44%; }
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Underline & Decoration
- Type
- Animated
- Browser support
- background-size width animation (all modern browsers)
- Capabilities
- pure