CSS - text-underline-position

トップ > CSSリファレンス > text-underline-position

概要

属性名 text-underline-position
auto | alphabetic | [ below || [ left | right ] ]
初期値auto
適用可能要素すべての要素
継承継承する
メディアVisual / Text
サポートC3 / e5.5

説明

下線の表示場所を指定します。

説明
autoブラウザにまかされます。(C3/e5.5)
alphabetic下線にします。p や g の最下部よりも少し上に線を引きます。(C3)
below下線にします。CSS3 では p や g の最下部よりも少し下に線を引くと定義されていますが、IE でも最下部より少し上に引かれるようです。(C3/e5.5)
left縦書きの場合左側に表示します。(C3)
right縦書きの場合右側に表示します。(C3)

使用例

HTML
<h5>auto</h5>
<div style="text-decoration:underline; text-underline-position:auto; font:24pt Times">
Apple Orange Grape
</div>

<h5>alphabetic</h5>
<div style="text-decoration:underline; text-underline-position:alphabetic; font:24pt Times">
Apple Orange Grape
</div>

<h5>below</h5>
<div style="text-decoration:underline; text-underline-position:below; font:24pt Times">
Apple Orange Grape
</div>

<h5>left</h5>
<div style="text-decoration:underline; text-underline-position:left; font:24pt Times">
Apple Orange Grape
</div>

<h5>right</h5>
<div style="text-decoration:underline; text-underline-position:right; font:24pt Times">
Apple Orange Grape
</div>
表示
auto
Apple Orange Grape
alphabetic
Apple Orange Grape
below
Apple Orange Grape
left
Apple Orange Grape
right
Apple Orange Grape

Copyright (C) 1997-2012 杜甫々
初版:1997年7月27日、最終更新:2012年5月4日
http://www.tohoho-web.com/css/prop/text-underline-position.htm