The CSS ::search-text pseudo-element selects matching text from your browser’s “find in page” feature. For example, if you use your browser search to find “search-text” on this page, all instances of it will highlight. This pseudo-element lets us style the appearance of that highlight.
And a bonus! If there are multiple matches on the page, then ::search-text can be used with the :current pseudo-class to style the match that’s currently in focus.
You can “find in page” using the CTRL + F (for Windows) or "⌘F" (for Mac) keyboard shortcuts.
::search-text {
background: oklch(87% 0.17 90) /* yellow */;
