How the browser finds text on a page
Every browser ships a built-in search bar. Press the keyboard shortcut and a highlight sweeps the page, marking every match in a contrasting background. The browser has always chosen that background colour for you — until Chrome 144.
The new CSS highlight pseudo-elements give authors direct access to the find-in-page rendering layer. ::search-text targets every match the browser finds during a search, while ::search-text:current targets whichever match the user is currently focused on. Both pseudos sit inside the highlight cascade, the same painting layer that powers ::selection and ::spelling-error.
Why does this matter? Consider a developer documentation site: dark background, syntax-highlighted code, bright accent colours. The browser’s default yellow highlight clashes violently with the palette. With one CSS rule the site can switch to a highlight that respects the design system, improves contrast, and still clearly distinguishes the current match from all the other matches.
The browser renders each search hit as an overlay above the normal text layer. Authors can customise the background colour, foreground colour, and text decoration of each match. Shadows, outlines, and most other properties that would affect layout are excluded — the highlight layer is stateless and cannot reflow the document.
A newspaper might keep a classic yellow highlight with an orange accent for the current match. A terminal emulator might flip to green-on-black. A minimal content site might use nothing but a bold underline. Each style is a matter of a few CSS lines, and all of them can be tuned for dark mode with a single @media block. The browser handles the rest: it scans the page, paints the highlights, and advances through matches as the user presses the arrow key.