下線・打消し線
text-decorationtext-decoration-linetext-decoration-colortext-decoration-style
テキストへの下線・上線・打消し線などのデコレーションを制御するプロパティです。カスタム色・スタイル・太さ・位置の指定も可能です。
デモ：各種デコレーション
text-decoration-line の値
underline — 下線（リンクのデフォルト）
overline — 上線
line-through — 打消し線（取消線）
underline overline — 複数同時指定
text-decoration-style の値
solid — 実線（デフォルト）
dashed — 破線
dotted — 点線
wavy — 波線（スペルチェックのような見た目）
double — 二重線
カスタム下線のスタイリング例
ピンクの波線・太さ3px・オフセット6px
インディゴの下線・太さ2px・オフセット4px
コード例
/* ショートハンド */
a {
text-decoration: underline solid blue 2px;
/* line style color thickness の順 */
}
/* 個別プロパティ */
.custom-underline {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: #ec4899;
text-decoration-thickness: 3px;
text-underline-offset: 6px;
}
/* 打消し線（削除済みテキスト） */
del, .strike {
text-decoration: line-through;
text-decoration-color: red;
}
/* 下線を非表示 */
a.no-underline {
text-decoration: none;
}
/* 複数の線を同時に */
.multi-line {
text-decoration-line: underline overline;
}比較：text-decoration: underline vs border-bottom
| 観点 | text-decoration: underline | border-bottom |
|---|---|---|
| 位置 | テキストのベースラインに沿って表示 | 要素ボックスの底辺に固定 |
| 複数行テキスト | ✅ 各行の下に線が引かれる | ❌ 最後の行の下にだけ表示 |
| スタイルの豊富さ | ✅ wavy/dashed/dotted、色・太さ・オフセット | solid/dashed/dotted程度 |
| 位置の調整 | text-underline-offset で調整 | padding-bottom で間隔調整 |
| 文字との交差 | 文字と交差する場合がある（jpなら少ない） | 文字と重ならない（間隔を保てる） |
text-decoration: underline
リンクテキストの例border-bottom
リンクテキストの例NEWtext-decoration-thickness / text-underline-offset（2020〜2022年〜）
下線の太さ（text-decoration-thickness）と テキストからの距離（text-underline-offset）を 細かく調整できる比較的新しいプロパティです。カスタムリンクスタイルに非常に便利です。
thickness: from-font, offset: auto（フォント推奨値）
thickness: 1px, offset: 3px（細めで少し離す）
thickness: 3px, offset: 8px（太めで大きく離す）
/* カスタム下線スタイリング */
a {
text-decoration-line: underline;
text-decoration-thickness: 2px; /* 太さ: px / em / from-font */
text-underline-offset: 4px; /* ベースラインからの距離 */
text-decoration-color: currentColor; /* 文字色と同じ */
}
a:hover {
text-decoration-color: #6366f1;
text-decoration-thickness: 3px;
}🤖 AIプロンプトテンプレート
CSSのtext-decorationプロパティを使ったテキスト装飾の実装例をReact + Tailwind CSSで作成してください。 要件: - underline / overline / line-through の各値と複数同時指定の比較デモ - text-decoration-style（solid / dashed / dotted / wavy / double）の視覚的な比較 - text-decoration-color / text-decoration-thickness / text-underline-offset を組み合わせたカスタム下線デザイン - ホバー時に下線のスタイルが変化するリンクのインタラクションデモ - text-decoration: underline vs border-bottom を並べて比較するデモ（複数行テキストでの違い） - 打消し線（line-through）を使ったセール価格表示のUIコンポーネント
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。