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

::target-text

::target-text はブラウザのテキストフラグメント機能でハイライトされたテキストのスタイルをカスタマイズできます。デフォルトのハイライト色を変更したり、追加のスタイルを適用することが可能です。検索結果やリンク共有で特定のテキスト箇所を目立たせるために使用します。

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

概要

::target-text はブラウザのテキストフラグメント機能でハイライトされたテキストのスタイルをカスタマイズできます。デフォルトのハイライト色を変更したり、追加のスタイルを適用することが可能です。検索結果やリンク共有で特定のテキスト箇所を目立たせるために使用します。

対応ブラウザ

デスクトップ

Chrome 89+
Edge 89+
Safari 18.2+
Firefox 131+

モバイル

Chrome Android 89+
Safari iOS 18.2+
Firefox Android 131+

基本構文

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

実務での使いどころ

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

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

注意点

  • テキストフラグメント機能自体がすべてのブラウザで同じように動作するわけではないため、ハイライトスタイルの一貫性は保証されません。

アクセシビリティ

  • ハイライトされたテキストと背景のコントラスト比が WCAG 基準を満たすよう注意してください。

参考リンク