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

今日は蒸し暑いですね。