| 属性名 | text-underline-offset |
|---|---|
| 値 | auto | <length> | <percentage> |
| 初期値 | auto |
| 適用可能要素 | すべての要素 |
| 継承 | 継承する |
| サポート | https://caniuse.com/?search=text-underline-offset |
下線の表示場所を指定します。
| 値 | 説明 |
|---|---|
| auto | ブラウザのデフォルトの場所に下線をひきます。 |
| <length> | 下線までの距離を長さで指定します。 |
| <percentage> | 下線までの距離をパーセントで指定します。 |
.uline {
text-decoration: underline;
font-size: 20pt;
margin-bottom: 2rem;
}
.tuo-auto {
text-underline-offset: auto;
}
.tuo-10px {
text-underline-offset: 10px;
}
.tuo-50p {
text-underline-offset: 50%;
}
<div class="uline tuo-auto">Hello</div> <div class="uline tuo-10px">Hello</div> <div class="uline tuo-50p">Hello</div>