text-decoration-line CSS3

text-decoration-line は、上線、下線、取り消し線を指定します。複数指定もできます。

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

Value(値)

none
初期値 線無し
underline
下線
overline
上線
line-through
取り消し線
blink
点滅(非推奨 / サポートしている最新 UA なし)

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { text-decoration-line: none; }
   p.test2 { text-decoration-line: underline; }
   p.test3 { text-decoration-line: overline; }
   p.test4 { text-decoration-line: line-through; }
   p.test5 { text-decoration-line: blink; }
  </style>
 </head>
 <body>
   <p class="test1">今日は 	蒸し暑いですね。</p>
   <p class="test2">今日は 	蒸し暑いですね。</p>
   <p class="test3">今日は 	蒸し暑いですね。</p>
   <p class="test4">今日は 	蒸し暑いですね。</p>
   <p class="test5">今日は 	蒸し暑いですね。</p>
 </body>
</html>

display

今日は 蒸し暑いですね。

今日は 蒸し暑いですね。

今日は 蒸し暑いですね。

今日は 蒸し暑いですね。

今日は 蒸し暑いですね。

  • Google Chrome 64.0.3282.186、Firefox58.0.2にて表示確認。blink 以外。(2018/3/14)
  • CSSソースにベンダープレフィックス「-moz-」を付けてます。

上に戻る