CSS - text-underline-position

概要

属性名 text-underline-position
値 auto | [ under || [ left | right ] ]
初期値auto
適用可能要素すべての要素
継承継承する
サポートhttps://caniuse.com/?search=text-underline-position

説明

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

値説明
autoブラウザのデフォルトの場所に下線をひきます。
underテキストのベースライン(文字 y の下橋)よりも下の位置に下線をひきます。
left縦書きの場合左側に表示します。
right縦書きの場合右側に表示します。

使用例

CSS
.uline {
  text-decoration: underline;
  font-size: 20pt;
  margin-bottom: .5rem;
}
.vertical {
  writing-mode: vertical-rl;
}
.tup-auto {
  text-underline-position: auto;
}
.tup-under {
  text-underline-position: under;
}
.tup-left {
  text-underline-position: left;
}
.tup-right {
  text-underline-position: right;
}
HTML
<div class="uline tup-auto">Apple(auto)</div>
<div class="uline tup-under">Apple(under)</div>
<div class="uline vertical tup-left">縦書き</div><br>
<div class="uline vertical tup-right">縦書き</div>
表示
Apple(auto)
Apple(under)
縦書き
縦書き

関連項目

text-decoration

リンク

Copyright (C) 1997-2022 杜甫々
初版：1997年7月27日、最終更新：2022年8月21日
https://www.tohoho-web.com/css/prop/text-underline-position.htm