text-decoration (color, style, thickness)
text-decoration-color、text-decoration-style（solid / double / dotted / dashed / wavy）、text-decoration-thickness を使って、下線や取り消し線の見た目を細かくカスタマイズできる。ブランドカラーの下線やスタイリッシュな装飾が実現可能。
概要
text-decoration-color、text-decoration-style（solid / double / dotted / dashed / wavy）、text-decoration-thickness を使って、下線や取り消し線の見た目を細かくカスタマイズできる。ブランドカラーの下線やスタイリッシュな装飾が実現可能。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
.fancy-underline {
text-decoration-line: underline;
text-decoration-color: #e63946;
text-decoration-style: wavy;
text-decoration-thickness: 2px;
}
/* ショートハンド */
.shorthand {
text-decoration: underline wavy #e63946 2px;
}実務での使いどころ
-
カスタムリンクスタイル
リンクの下線をブランドカラーに合わせ、波線やドット線で視覚的に差別化する。
-
エディタ風のエラー表示
wavy スタイルの赤い下線でスペルミスやエラー箇所を示す UI を実現する。
注意点
- text-decoration-thickness を大きくしすぎると文字と重なり可読性が下がる。text-underline-offset と組み合わせて調整すること。
アクセシビリティ
- 装飾の色だけで意味を伝えないこと。色覚多様性を考慮し、テキストや形状でも情報を補完する。