text-underline-position－CSSリファレンス

トップページ > CSS > text-underline-position

★CSSリファレンス

text-underline-position …… テキスト傍線の表示位置を指定する

text-underline-positionプロパティは、テキスト傍線の表示位置を指定する際に使用します。

text-underline-positionプロパティの指定は、祖先要素で指定された下線には影響しません。

値に left または right が単独で指定されている場合、同時に under も指定されていることになります。

■値

auto: アルファベットのベースライン、または、その下に傍線が引かれる。それ以外の詳細は、ユーザエージェントが決定する（初期値）
under: テキストの下に傍線が引かれる。傍線はアルファベットの「g」が持つような下に伸びた部分を横切らず、その下に傍線が引かれる
left: 縦書きモードでは左側に傍線が引かれる。横書きモードでは under と同じ
right: 縦書きモードでは右側に傍線が引かれる。横書きモードでは under と同じ

■初期値・適用対象・値の継承

初期値: auto
適用対象: すべての要素
値の継承: する

■使用例

スタイルシート部分は外部ファイル（sample.css）に記述。

p.sample {text-decoration: underline;}

HTMLソース

<p class="sample" style="text-underline-position: auto;">
text-underline-position: auto; を指定
</p>

<p class="sample" style="text-underline-position: under;">
text-underline-position: under; を指定
</p>

<p class="sample" style="text-underline-position: left;">
text-underline-position: left; を指定
</p>

<p class="sample" style="text-underline-position: right;">
text-underline-position: right; を指定
</p>

↓↓↓

ブラウザ上の表示

text-underline-position: auto; を指定

text-underline-position: under; を指定

text-underline-position: left; を指定

text-underline-position: right; を指定

■Internet Explorer独自の値

text-underline-positionプロパティは、もともとはInternet Explorerの独自拡張でした。 Internet Explorer限定ですが、以下の値を使用することができるかもしれません。

above: 下線をテキストの上に表示する
below: 下線をテキストの下に表示する

■Internet Explorer限定の使用例

スタイルシート部分は外部ファイル（sample.css）に記述。

p.sample {text-decoration: underline;}

HTMLソース

<p class="sample" style="text-underline-position: above;">
text-underline-position: above; を指定（IE独自の値）
</p>

<p class="sample" style="text-underline-position: below;">
text-underline-position: below; を指定（IE独自の値）
</p>

↓↓↓

ブラウザ上の表示

text-underline-position: above; を指定（IE独自の値）

text-underline-position: below; を指定（IE独自の値）

★CSSリファレンス

■値

■初期値・適用対象・値の継承

■使用例

スタイルシート部分は外部ファイル（sample.css）に記述。

HTMLソース

ブラウザ上の表示

■Internet Explorer独自の値

■Internet Explorer限定の使用例

スタイルシート部分は外部ファイル（sample.css）に記述。

HTMLソース

ブラウザ上の表示

Sponsors