Chrome 144 recently shipped ::search-text, which is now one of several highlight-related pseudo-elements. This one selects find-in-page text, which is the text that gets highlighted when you do a Ctrl/Command + F-type search for something on a page and matches are found.

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

Chrome 144 introduced the ::search-text pseudo-element for styling find-in-page text matches. This guide covers all highlight-related pseudo-elements (::search-text, ::target-text, ::selection, ::highlight(), ::spelling-error, ::grammar-error) and demonstrates how to style them accessibly using relative color syntax to invert background colors. The technique ensures highlights stand out with proper contrast while remaining visually distinctive from each other, even when overlapping.

How to Style the New ::search-text and Other Highlight-y Pseudo-Elements

The different types of highlight pseudo-elements

What should highlight pseudo-elements look like?

<p>Related to this, I have recently created a very high-quality React component/hook for text-highlight which is based on this:</p>
<p><a href="https://github.com/yairEO/react-css-highlight" target="_blank" rel="noopener nofollow">https://github.com/yairEO/react-css-highlight</a></p>
