text-underline-position CSS3

text-underline-position は、下線の位置を指定します。

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

Value(値)

auto
初期値 ユーザー環境に依存
under
全ての文字の下に表示
left
縦書きの時に文字の左側に表示
right
縦書きの時に文字の右側に表示

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { text-decoration-line: underline; text-underline-position: auto; }
   p.test2 { text-decoration-line: underline; text-underline-position: under; }
   p.test3 { text-decoration-line: underline; text-underline-position: left; }
   p.test4 { text-decoration-line: underline; text-underline-position: right; }
  </style>
 </head>
 <body>
   <p class="test1">opqrstuvwxyz</p>
   <p class="test2">opqrstuvwxyz</p>
   <p class="test3">今日は蒸し暑いですね。</p>
   <p class="test4">今日は蒸し暑いですね。</p>
 </body>
</html>

display

opqrstuvwxyz

opqrstuvwxyz

今日は蒸し暑いですね。

今日は蒸し暑いですね。

上に戻る