Yellow marker behind a key word, sweeping in on hover. Plus hand-drawn strikethroughs and circle annotations. Editorial energy without a single image.
A persistent or hover-triggered marker stripe behind specific words in body copy. Mimics highlighting a textbook with a yellow marker. Variants extend to hand-drawn strikethroughs (for "old prices" or struck-out words) and rough circles drawn around emphasized words. Editorial sites (The Verge, Stratechery, Substack newsletters) lean on these heavily because they add personality without breaking the prose flow.
Pure CSS, no images for the marker: background-image: linear-gradient(120deg, yellow, yellow) with background-position: 0 88% and background-size: 100% 35% creates a horizontal yellow bar through the lower third of the text — like a highlight. For the sweep-in variant, start background-size: 0% 35% and transition to 100% on hover. Strikethroughs and circle marks use inline SVG paths as background-image for the squiggly hand-drawn feel.
Hover the "deliberately" word — the marker sweeps in. The other annotations are persistent.
The whole point of this batch was patience. We doubled the bath time, ran the dye for an extra night, and let the cloth rest. The result is a softer hand and a deeper finish.
Each jacket is sewn by five hands, finished by one, and numbered in marker with a real fountain pen.
Pricing is now $485 $385 through the weekend.
Build four text annotation styles, all using pure CSS:
(1) PERSISTENT MARKER: wrap a word in span.mh-marker { background-image:linear-gradient(120deg, #fde047 0%, #fde047 100%); background-repeat:no-repeat; background-position:0 88%; background-size:100% 35%; padding:0 4px } — creates a static yellow highlight bar behind the text.
(2) SWEEP MARKER (hover): same as above but start background-size:0% 35%; transition:background-size 0.5s ease; on :hover background-size:100% 35% — highlight sweeps in left to right like a marker stroke.
(3) HAND-DRAWN STRIKETHROUGH: span.mh-strike { position:relative; color:rgba(0,0,0,0.55) }, with ::after positioned absolute, inset -4px to -4px, top 55%, height 6px, background:url(inline-svg of a wavy stroke path in red) no-repeat — wavy stroke through the word like marker.
(4) HAND-DRAWN CIRCLE: span.mh-circle { position:relative; padding:0 14px }, ::before absolute inset -10px -2px, background:url(inline-svg of an ellipse path in red) no-repeat center / 100% 100% — rough circle around the word.
Demo using a serif paragraph (Georgia or Fraunces): show one of each annotation in a flowing paragraph. Include a bonus: old-price strikethrough + new-price marker side by side ("~~$485~~ [$385]").