Plugin

highlight.css

A drop-in collection of CSS-based text highlight effects — markers, underlines, scribbles, strikethroughs, and animated sweeps. One class, no JS.

npm install @goboldlyforward/highlight.css

Markers

Highlighter-pen backgrounds

Pure CSS gradients behind inline text. Multi-line wraps via box-decoration-break: clone. Recolor any element by overriding --hl-color.

.hl-marker
The quick brown fox jumps over the lazy dog with a classic yellow stripe.
.hl-marker-thin
A thin marker hugs the baseline like a soft underline.
.hl-marker-tall
A tall marker covers most of the x-height.
.hl-marker-full
A full block wraps the text completely.
.hl-marker-pen
A translucent pen lets the page tint through.
.hl-marker-gradient
A horizontal gradient fades out across the phrase.
.hl-marker-double
A double stripe sandwiches the text top and bottom.
.hl-marker-uneven
An uneven marker tilts the top edge.
.hl-marker-fade
A faded edge softens the bottom into transparency.

Underlines

Clean lines beneath the baseline

Two implementations: background gradients (for thicker, offsetable lines) and native text-decoration for wavy, dashed, double, dotted.

.hl-underline
Just a clean underline drawn with a background gradient.
.hl-underline-thick
A thicker underline for stronger emphasis.
.hl-underline-double
Two lines via underline double.
.hl-underline-wavy
A wavy underline — like a spellcheck squiggle.
.hl-underline-dashed
A dashed underline for hint-style annotations.
.hl-underline-dotted
A dotted underline reads as a soft glossary cue.

Scribbles

Hand-drawn underlines

Tileable SVG paths embedded as background-image data URIs. Color is baked into the SVG — to retint, override background-image on the element.

.hl-scribble
A soft hand-drawn line reads as informal annotation.
.hl-scribble-rough
A rougher pen stroke with uneven height and pace.
.hl-scribble-zigzag
A sketchy zigzag with angular turns.
.hl-scribble-loose
A looser, bouncier squiggle with more amplitude.
.hl-scribble-double
A double scribble, like a second pass when you really mean it.

Strikethroughs

Cross it out

Standard line-through with a few thickness and style variants, plus a soft gradient version that centers a band on the line.

.hl-strike
This idea was cancelled and replaced.
.hl-strike-thick
This option is firmly off the table.
.hl-strike-wavy
A wavy strike reads as casual or playful.
.hl-strike-soft
A soft strike centered on the line via background gradient.

Animated

Sweep on hover or scroll

A marker that sweeps left-to-right via a background-size transition. Hover to preview, or toggle .is-active from an IntersectionObserver for scroll-triggered use. Respects prefers-reduced-motion.

.hl-sweep
Hover this sweeping highlight to see it animate in.

Theming

One knob: --hl-color

Every marker, sweep, and soft-strike reads --hl-color for its tint, and underline backgrounds read --hl-stroke (defaults to currentColor). Override inline or in CSS.

style="--hl-color: …"
pink sky mint peach lavender
multi-line wrap
Markers survive line breaks because every effect sets box-decoration-break: clone, so each visual line gets its own background slice instead of one continuous bar across the whole paragraph.