タイポグラフィ（デザイン）
text-underline-offset
下線のオフセット値を指定する
| value | description | |
|---|---|---|
auto (default) | ブラウザで決められている初期値の値にする （Google Chrome の場合は 0px） | Tokyo Olympic |
0px | オフセット値を指定する | Tokyo Olympic |
1px | オフセット値を指定する | Tokyo Olympic |
4px | オフセット値を指定する | Tokyo Olympic |
Demo
The Tokyo Olympics were held in 2021.
The Tokyo Olympics were held in 2021.
The Tokyo Olympics were held in 2021.
The Tokyo Olympics were held in 2021.
<p>The <span class="line">Tokyo Olympics</span> were held in 2021.</p>
<p>The <span class="line style-1">Tokyo Olympics</span> were held in 2021.</p>
<p>The <span class="line style-2">Tokyo Olympics</span> were held in 2021.</p>
<p>The <span class="line style-3">Tokyo Olympics</span> were held in 2021.</p>
.style-1 {
text-underline-offset: 0px;
}
.style-2 {
text-underline-offset: 1px;
}
.style-3 {
text-underline-offset: 4px;
}
.line {
text-decoration-line: underline;
text-decoration-color: rgb(56, 189, 248);
}
概要
下線のオフセット値（離れる距離）を指定します。
注意事項
text-decoration-xxx系のプロパティと異なり、text-decorationでまとめて設定することはできません。
また、性質上Exampleのようにtext-decoration: underline;と一緒に用います。
Example
<p>The <span class="line">Tokyo Olympics</span> were held in 2021.</p>
.line {
text-decoration-line: underline;
text-underline-offset: 4px;
}