タイポグラフィ（デザイン）
text-decoration
傍線のスタイルをまとめて設定する
| value | description | |
|---|---|---|
underline | 下線 | Tokyo Olympic |
underline 4px blue | 太さ（text-decoration-thickness）、色（text-decoration-color）を指定する | Tokyo Olympic |
underline dotted | 線の種類（text-decoration-style）を指定する | Tokyo Olympic |
underline wavy | 線の種類（text-decoration-style）を指定する | Tokyo Olympic |
line-through | 打ち消し線 | Tokyo Olympic |
Demo
Tokyo Olympic
Tokyo Olympic
Tokyo Olympic
Tokyo Olympic
Tokyo Olympic
<p class="style-1">Tokyo Olympic</p>
<p class="style-2">Tokyo Olympic</p>
<p class="style-3">Tokyo Olympic</p>
<p class="style-4">Tokyo Olympic</p>
<p class="style-5">Tokyo Olympic</p>
.style-1 {
text-decoration: underline;
}
.style-2 {
text-decoration: underline blue 4px;
}
.style-3 {
text-decoration: underline dotted;
}
.style-4 {
text-decoration: underline wavy;
}
.style-5 {
text-decoration: overline;
}
概要
以下の 4 つのプロパティの値をまとめて設定できるショートハンドです。記述する順番は不同で、スペースで区切って指定することができます。
text-decoration-line（傍線の種類。下線、打ち消し線など）value description none傍線なし Tokyo Olympics underline下線 Tokyo Olympics overline上線 Tokyo Olympics line-through打ち消し線 Tokyo Olympics underline line-through下線 + 打ち消し線 Tokyo Olympics text-decoration-color（傍線の色）value description hotpink色名による指定 Tokyo Olympics rgb(56, 189, 248)rgb による指定 Tokyo Olympics text-decoration-style（傍線の種類。点線、波線など）value description solid(default)実線 Tokyo Olympics double二重線 Tokyo Olympics dotted点線 Tokyo Olympics dashed破線 Tokyo Olympics wavy波線 Tokyo Olympics text-decoration-thickness（傍線の太さ）value description auto(default)ブラウザで決められている初期値の太さにする
（Google Chrome では 1px）Tokyo Olympic 1px太さを指定する Tokyo Olympic 2px太さを指定する Tokyo Olympic 4px太さを指定する Tokyo Olympic
関連
参照
- 参照