text-decoration in ::selection
::selection 擬似要素で text-decoration を使用すると、テキスト選択時の下線、上線、取り消し線などの装飾をカスタマイズできます。ブランドカラーに合わせた選択スタイルの提供や、選択テキストの視認性向上に役立ちます。ただし、ブラウザサポートが限定的です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.selectors.selection.text-decoration | 105 | 105 | | | 105 | |
基本構文
CSS
::selection {
text-decoration: underline wavy;
text-decoration-color: #e74c3c;
background-color: #ffeaa7;
}ライブデモ
実務での使いどころ
-
ブランドに合わせた選択スタイル
テキスト選択時にブランドカラーの装飾線を表示し、サイト全体の統一感を演出します。
注意点
- SafariとFirefoxではサポートされていないため、この機能に依存したデザインは避けてください。
アクセシビリティ
- 選択テキストの装飾が過度にならないよう注意し、選択されたテキストが依然として読みやすい状態を維持してください。