| 属性名 | text-underline-position |
|---|---|
| 値 | auto | [ under || [ left | right ] ] |
| 初期値 | auto |
| 適用可能要素 | すべての要素 |
| 継承 | 継承する |
| サポート | https://caniuse.com/?search=text-underline-position |
下線の表示場所を指定します。
| 値 | 説明 |
|---|---|
| auto | ブラウザのデフォルトの場所に下線をひきます。 |
| under | テキストのベースライン(文字 y の下橋)よりも下の位置に下線をひきます。 |
| left | 縦書きの場合左側に表示します。 |
| right | 縦書きの場合右側に表示します。 |
.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;
}
<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>