テキストを下線などで装飾 (decoration) できます。
| 属性値 | 装飾方法 | 適用例 |
|---|---|---|
| none | 装飾しない | ABC |
| underline | テキストの下部に線を引く (下線) | ABC |
| overline | テキストの上部に線を引く | ABC |
| line-through | テキストの中央に線を引く (打ち消し線 / 取り消し線) | ABC |
| blink | テキストを点滅させる ※ブラウザによっては機能しない |
ABC |
線の太さはfont-sizeによって決まります。
underlineはHTMLのu要素でも表現できます。
| 適用方法 | コード | 適用例 |
|---|---|---|
| CSS | <span style="text-decoration: underline">ABC</span> |
ABC |
| HTML u要素 | <u>ABC</u> |
ABC |
line-throughによる視覚的な効果は、HTMLの要素を用いても表現できます。
| 要素 | 目的 |
|---|---|
| del要素 | 削除されたテキスト (Deleted Text) <del> - HTML | MDN |
| s要素 | 取り消し線 (Strikethrough) <s> - HTML | MDN |
| strike要素 (HTML 4で非推奨) | 取り消し線 (Strikethrough) <strike> - HTML | MDN |
| 適用方法 | コード | 適用例 |
|---|---|---|
| CSS | <span style="text-decoration: line-through">ABC</span> |
ABC |
| HTML del要素 | <del>ABC</del> |
|
| HTML s要素 | <s>ABC</s> |
|
| HTML strike要素 | <strike>ABC</strike> |
CSS3以降、text-decorationは下表の属性の省略形と解釈され、
text-decoration: underline solid red
のように複数の属性を一括して指定できます。
| 属性値 | 適用の対象 | 既定値 |
|---|---|---|
| text-decoration-line | 線の種類 | none |
| text-decoration-style | 線の様式 | solid |
| text-decoration-color | 線の色 | currentColor |
text-decorationの属性値と同じです。
| 属性値 | 種類 | 適用例 |
|---|---|---|
| none | なし | ABC |
| underline | テキストの下部に線 | ABC |
| overline | テキストの上部に線 | ABC |
| line-through | テキストの中央に線 | ABC |
| blink | テキストの点滅 | ABC |
| 属性値 | 様式 | 適用例 |
|---|---|---|
| solid | 一重の線 | ABC |
| double | 二重の線 | ABC |
| dotted | 点線 | ABC |
| dashed | 破線 | ABC |
| wavy | 波状の線 | ABC |