CSS3

プロパティ

text-underline-position

→●、mdn

テキスト下線の位置。

このプロパティは、要素に指定された下線の位置を設定する（これは、先祖要素により指定される下線には影響しない）。［left／right］のみが指定された場合、auto も含意される。

auto

ユーザー エージェントは、下線の位置を決定するにあたり、どのようなアルゴリズムを利用してもよいが、alphabetic 基底線の所かそれより下に引くものとする。

注記： ユーザー エージェントには、既定の下線位置は alphabetic 基底線になるべく近くすることが示唆される ― alphabetic 下線が高過ぎて、下付き文字（あるいは低くされた）テキストに交叉したり、漢字やチベット語などのアジアの用字系のグリフ上を描くことになる場合は、under にて述べたように、下線を［低くずらすか、em ボックス辺に整列する］方が、より適切になるであろう。

<SPAN style="text-decoration:underline">開始
 <SPAN style="border:1px solid red;
  text-underline-position:auto;
 ">テストghij</SPAN>
終了</SPAN>

under

下線は、要素のテキスト内容の下面に位置される。この事例では、下線は通例的にはディセンダと交叉しない（これは“accounting”下線と呼ばれることもある）。この値は、縦書きモードにおいてある特定の側が選好されるならば left／right と組み合せることもできる。

¶例省く

注記： 値 under は、下線がグリフと競合しないことを保証するものではない ― フォントには、［ディセンダ／発音区別符］が、フォントのディセント計量の下へ拡張するものもあるので。

<SPAN style="text-decoration:underline">開始
 <SPAN style="border:1px solid red;
  text-underline-position:under;
 ">テストghij</SPAN>
終了</SPAN>

left、right

縦書きモードにおいては、下線は、常にテキストの［左端／右端］辺に整列されることを除いて、under に対するときと同様に整列され、上線は、その反対側に整列される。

left

right

縦書きモードにおいては、text-underline-position の［left／right］値は、下線をテキストのどちら側にも配置できるようにする（横書きモードにおいては、両値とも auto として扱われる）。

<DIV style="border:1px solid black; width:100px;
 writing-mode:vertical-rl;
">
 <SPAN style="text-decoration:underline">開始
  <SPAN style="border:1px solid red;
   text-underline-position:left;
  ">テストghij</SPAN>
 終了</SPAN>
</DIV>

<DIV style="border:1px solid black; width:100px;
 writing-mode:vertical-rl;
">
 <SPAN style="text-decoration:underline">開始
  <SPAN style="border:1px solid red;
   text-underline-position:right;
  ">テストghij</SPAN>
 終了</SPAN>
</DIV>

¶省く

関連

text-decoration。text-decoration-color、text-decoration-line、text-decoration-style。writing-mode。

テスト