CSS - text-decoration

トップ > CSSリファレンス > text-decoration

概要

属性名 text-decoration
<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
初期値個々のプロパティを参照
適用可能要素個々のプロパティを参照
継承個々のプロパティを参照
サポートhttps://caniuse.com/?search=text-decoration

説明

テキストの装飾線(上線、下線、打消し線)を描画します。text-decoration-line, text-decoration-style, text-decoration-color の値をまとめて指定します。

例えば、a要素に none を適用することで下線の無いリンクを表示することができます。

a { text-decoration: none; }

使用例

HTML
<div style="text-decoration:none">線無し</div>
<div style="text-decoration:underline">下線</div>
<div style="text-decoration:overline">上線</div>
<div style="text-decoration:line-through">打ち消し線</div>
<div style="text-decoration:underline solid">下線・実線</div>
<div style="text-decoration:underline double">下線・二重線</div>
<div style="text-decoration:underline dotted">下線・点線</div>
<div style="text-decoration:underline dashed">下線・破線</div>
<div style="text-decoration:underline wavy">下線・波線</div>
<div style="text-decoration:underline red">下線・赤</div>
<div style="text-decoration:blink">ブリンク</div>
表示
線無し
下線
上線
打ち消し線
下線・実線
下線・二重線
下線・点線
下線・破線
下線・波線
下線・赤
ブリンク

関連項目

text-decoration-color, text-decoration-line, text-decoration-skip, text-decoration-skip-ink, text-decoration-style, text-decoration-thickness

リンク


Copyright (C) 1997-2022 杜甫々
初版:1997年7月27日、最終更新:2022年7月31日
http://www.tohoho-web.com/css/prop/text-decoration.htm