highlight word underlay emphasis inline marker text emphasize keywords in headlines highlight brand terms marker-style text decoration need inline word emphasis without bold/color want marker/highlighter text effect standard underlines don't stand out enough
Word Highlight
Fetch snippet JSON:
curl https://webspire.de/snippets/text/word-highlight.json Preview
Background
Customize
Quick Start
<span class="word-highlight">important</span>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 374 bytes · 19 lines
- Custom Properties
-
--highlight-color--highlight-height - Classes
-
.word-highlight
highlight word underlay emphasis inline marker text
A translucent pill-shaped underlay positioned behind a word via ::after. Creates a marker/highlighter effect without disrupting text flow.
Headline emphasis
<h2 class="text-3xl font-bold">
Build <span class="word-highlight">better</span> products faster
</h2>Custom color
<span class="word-highlight" style="--highlight-color: oklch(0.7 0.2 150 / 0.15)">
sustainable
</span>