Marker Highlight Text Hover
Two quick marker strokes scrub back and forth behind the word, slightly crooked with rough ends, and darken where they overlap. Two rotated pseudo-elements scale in on X.
Also known as: highlighter text on hover, hand drawn highlight, marker pen effect.
Important
HTML
<div class="hfx-text-marker">Important</div>
CSS
.hfx-text-marker {
--c: var(--hfx-color, #3b82f6);
font-size: calc(var(--hfx-size, 16px) * 2.5);
font-family: system-ui, sans-serif;
font-weight: 800;
line-height: 1.15;
cursor: default;
position: relative;
isolation: isolate;
display: inline-block;
padding: 0 0.1em;}
.hfx-text-marker::before,
.hfx-text-marker::after {
content: "";
position: absolute;
z-index: -1;
left: -0.04em;
right: -0.04em;
background: color-mix(in srgb, var(--c) 30%, transparent);
border-radius: 0.35em 0.1em 0.4em 0.15em / 0.2em 0.35em 0.15em 0.3em;
transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-text-marker::before {
bottom: 0.12em;
height: 0.54em;
transform-origin: left;
transform: rotate(-2deg) scaleX(0);
}
.hfx-text-marker::after {
bottom: 0.2em;
height: 0.44em;
transform-origin: right;
transform: rotate(1.5deg) scaleX(0);
}
.hfx-text-marker:hover::before { transform: rotate(-2deg) scaleX(1); }
.hfx-text-marker:hover::after {
transform: rotate(1.5deg) scaleX(1);
transition-delay: 0.25s;
}
@media (prefers-reduced-motion: reduce) {
.hfx-text-marker, .hfx-text-marker *, .hfx-text-marker::before, .hfx-text-marker::after, .hfx-text-marker *::before, .hfx-text-marker *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<span class="relative isolate inline-block px-1 text-5xl font-extrabold before:absolute before:inset-x-0 before:bottom-2 before:-z-10 before:h-5 before:origin-left before:-rotate-2 before:scale-x-0 before:rounded-md before:bg-blue-500/40 before:transition-transform before:duration-300 before:content-[''] hover:before:scale-x-100"> Important </span>
Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.