CSS ::search-text and :current playground

Explore ::search-text with controls for find-in-page matches and use :current to distinguish the active result.

Ask AI

CSS ::search-text and :current playground

Response generated with openai/gpt-5.4-nano. AI can make mistakes. Always review the result.

Open Find in page — Ctrl+F / ⌘F and search for “highlight”.

Editorial demo

Use find in page to highlight repeated words in an article.

Scope

A specific selector can highlight only this block, while the global selector acts across the whole page.

HTML
<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>
CSS
.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;
}