Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
セレクター Limited support

text-decoration in ::selection

::selection 擬似要素で text-decoration を使用すると、テキスト選択時の下線、上線、取り消し線などの装飾をカスタマイズできます。ブランドカラーに合わせた選択スタイルの提供や、選択テキストの視認性向上に役立ちます。ただし、ブラウザサポートが限定的です。

選択スタイルテキスト装飾

概要

::selection 擬似要素で text-decoration を使用すると、テキスト選択時の下線、上線、取り消し線などの装飾をカスタマイズできます。ブランドカラーに合わせた選択スタイルの提供や、選択テキストの視認性向上に役立ちます。ただし、ブラウザサポートが限定的です。

対応ブラウザ

デスクトップ

Chrome 105+
Edge 105+
Safari 未対応
Firefox 未対応

モバイル

Chrome Android 105+
Safari iOS 未対応
Firefox Android 未対応

基本構文

CSS 
::selection {
  text-decoration: underline wavy;
  text-decoration-color: #e74c3c;
  background-color: #ffeaa7;
}

実務での使いどころ

  • ブランドに合わせた選択スタイル

    テキスト選択時にブランドカラーの装飾線を表示し、サイト全体の統一感を演出します。

注意点

  • SafariとFirefoxではサポートされていないため、この機能に依存したデザインは避けてください。

アクセシビリティ

  • 選択テキストの装飾が過度にならないよう注意し、選択されたテキストが依然として読みやすい状態を維持してください。

参考リンク