Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。

::target-text

::target-text は CSS の擬似要素で、ブラウザーがテキストフラグメントに対応している場合に、スクロールされたテキストを表します。これにより、作成者はそのテキスト節をどのように強調表示するかを選ぶことができます。

::target-text 擬似要素は、すべての表示強調擬似要素に共通する特別な継承モデルに従います。この継承の仕組みの詳細については、表示強調擬似要素の継承の節を参照してください。

擬似要素テキストハイライト

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`:target-text`	89	89	131	18.2	89	18.2

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

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

CSS defaulthilight demo.

CSS customcolor demo.

CSS Multiplematch demo.

テキストフラグメントのカスタムハイライト

URLテキストフラグメントでハイライトされたテキストの背景色や文字色をサイトのデザインに合わせてカスタマイズします。