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リンク
- https://developer.mozilla.org/ja/docs/Web/CSS/text-underline-position
- https://drafts.csswg.org/css-text-decor/#text-underline-position-property
Copyright (C) 1997-2022 杜甫々
初版:1997年7月27日、最終更新:2022年8月21日
https://www.tohoho-web.com/css/prop/text-underline-position.htm