Newly available Useful when ::target-text affects readability, line flow, or typographic consistency. Treat it as a content-facing choice, not just decoration.

::target-text

The ::target-text CSS pseudo-element represents the text that has been scrolled to if the browser supports text fragments. It allows authors to choose how to highlight that section of text.

The ::target-text pseudo-element follows a special inheritance model common to all highlight pseudo-elements. For more details on how this inheritance works, see the Highlight pseudo-elements inheritance section.

Typography

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:target-text
89
89
131
18.2
89
18.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
::target-text {
  background-color: #ffeb3b;
  color: #000;
}

Live demo

defaulthilight

CSS defaulthilight demo.

PreviewFullscreen

customcolor

CSS customcolor demo.

PreviewFullscreen

Multiplematch

CSS Multiplematch demo.

PreviewFullscreen

Use cases

  • Reading rhythm

    Use ::target-text to improve how text wraps, aligns, or scales in dense layouts and editorial UI.

  • Language-aware text

    Adjust typography when script direction, spacing, or writing rules differ across languages.

Cautions

  • Test with real content rather than short placeholder strings because typographic behavior changes with length and language.
  • Prefer the smallest rule that solves the layout problem so text remains easy to maintain.

Accessibility

  • Typography choices should preserve readability at high zoom and on narrow screens.
  • Avoid stylistic settings that reduce comprehension or make scanning harder.

Related links