Explore ::search-text with controls for find-in-page matches and use :current to distinguish the active result.
Open Find in page — Ctrl+F / ⌘F and search for “highlight”.
Use find in page to highlight repeated words in an article.
A specific selector can highlight only this block, while the global selector acts across the whole page.
<p>Open Find in page — Ctrl+F / ⌘F and search for “highlight”.</p>
<section class="search-text">
<div>
<h2>Editorial demo</h2>
<p>Use find in page to highlight repeated words in an article.</p>
</div>
<div>
<h2>Scope</h2>
<p>A scoped selector targets this block, while the global selector can style every search match on the page.</p>
</div>
</section>.search-text ::search-text {
background-color: #d9fff0;
color: #18352b;
text-decoration: underline;
text-shadow: 0 0 3px #8ee9c0;
}
.search-text ::search-text:current {
background-color: #ffcf5a;
color: #231500;
text-decoration: underline wavy;
text-shadow: 0 0 7px #ff8a00;
}