text-decoration CSS3

text-decoration は、 text-decoration-line、 text-decoration-style、 text-decoration-color の略式です。省略した場合の値はその初期値になります。 text-decoration-style と text-decoration-color の両方の値を省略した text-decoration 宣言はCSS1・css2と後方互換性があります。

名前:text-decoration
値: <text-decoration-line> || <text-decoration-style> || <text-decoration-color>
初期値:none
適用対象:全ての要素
継承:しない
パーセンテージ:n/a
メディア:visual（視覚的）
計算値:個々のプロパティ参照
アニメーション:個々のプロパティ参照

text-decoration CSS2.2

text-decoration は、テキストに下線・上線・取り消し線・点滅を指定する時に使います。複数指定する時は、空白スペースで区切って記述します。 ※ 関連ページ 「text-decoration-line」

名前:text-decoration
値: none | [ underline || overline || line-through || blink ] | inherit
初期値:none
適用対象:全ての要素
継承:しない
パーセンテージ:n/a
メディア:visual（視覚的）
計算値:As specified（指定通り）

Value（値）

none
初期値 線無し
underline
下線を付ける
overline
上線を付ける
line-through
取り消し線を付ける
blink
点滅（IE未対応）させる
inherit
親要素の値を継承する

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { text-decoration: none; }
   p.test2 { text-decoration: underline; }
   p.test3 { text-decoration: overline; }
   p.test4 { text-decoration: line-through; }
   p.test5 { text-decoration: blink; }
   p.test6 { text-decoration: underline overline line-through; }
  </style>
 </head>
 <body>
   <p class="test1">none</p>
   <p class="test2">underline</p>
   <p class="test3">overline</p>
   <p class="test4">line-through</p>
   <p class="test5">blink（未対応ブラウザ多し）</p>
   <p class="test6">underline overline line-through</p>
 </body>
</html>

display

none

underline

overline

line-through

blink（未対応ブラウザ多し）

underline overline line-through

上に戻る