【text-underline-position】下線の位置を指定

text-underline-positionプロパティでは、text-decorationで付けた下線の表示位置を指定することができます。

使い方はtext-decorationプロパティでテキストに下線を表示し、text-underline-positionの各値で上線、または下線を表示します。

これはtext-decorationのoverline、またはunderlineと同様の効果となりますが、writing-modeプロパティを使用し縦書き表示にした場合には、値はunderlineしか対応していませんので、下線はテキストの右側に引かれます。 ですがtext-underline-positionプロパティを利用する事で、左右のどちらにも下線を引くことができるようになります。

なおInternet Explorer6以降での対応となっており、言語コードが日本語で表示形式が縦書きの場合には、右側に下線が表示されます。

書式

  • text-underline-position : ……… 下線の位置を指定する

★:above、below、auto

above
上線を表示(縦書き時は右)
below
下線を表示(縦書き時は左)
auto
下線を表示(縦書き時は右)。これが初期値

使用した時の例

.sample1 {
  text-decoration: underline;
  text-underline-position: above;
}
.sample2 {
  text-decoration: underline;
  text-underline-position: below;
}
<div class="sample1">テキストに上線を表示します</div>
<div class="sample2">テキストに下線を表示します</div>

ブラウザ上の表示例

テキストに上線を表示します
テキストに下線を表示します

対応ブラウザなどのデータ

初期値 auto 値の継承 継承する
適用可能な要素 すべての要素
メディア visual / text
対応ブラウザ Internet Explorer6~

関連情報