text-underline-offset
Baseline 廣泛可用 *
text-underline-offset 是一個 CSS 屬性，用於設定下劃線文字裝飾線（使用 text-decoration 應用）與其原始位置的偏移距離。
試一試
text-underline-offset: auto;
text-underline-offset: 8px;
text-underline-offset: -0.5rem;
<section id="default-example">
<p id="example-element">And after all we are only ordinary</p>
</section>
p {
font: 1.5em sans-serif;
text-decoration-line: underline;
text-decoration-color: red;
}
text-underline-offset 不是 text-decoration 簡寫的一部分。雖然一個元素可以有多個 text-decoration 線，但 text-underline-offset 隻影響下劃線，而不影響其他可能的線條裝飾選項，例如 overline 或 line-through。
語法
css
/* Single keyword */
text-underline-offset: auto;
/* length */
text-underline-offset: 0.1em;
text-underline-offset: 3px;
/* percentage */
text-underline-offset: 20%;
/* Global values */
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;
text-underline-offset 屬性指定為以下列表中的單個值。
值
auto-
瀏覽器為下劃線選擇適當的偏移量。
<length>-
將下劃線偏移量指定為
<length>，覆蓋字型檔案建議和瀏覽器預設值。建議使用em單位，以便偏移量隨字型大小縮放。 <percentage>-
將下劃線偏移量指定為元素字型中 1 em 的
<percentage>。百分比作為相對值繼承，因此會隨字型的變化而縮放。對於此屬性的給定應用，偏移量在應用下劃線的整個框中是恆定的，即使存在具有不同字型大小或垂直對齊的子元素。
正式定義
| 初始值 | auto |
|---|---|
| 應用於 | 所有元素。也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 是 |
| 百分比 | 參考元素本身的字型大小 |
| 計算值 | 同指定值 |
| 動畫型別 | 按計算值型別 |
正式語法
text-underline-offset =
auto |
<length-percentage>
<length-percentage> =
<length> |
<percentage>
示例
text-underline-offset 的演示
html
<p class="one-line">Here's some text with an offset wavy red underline!</p>
<br />
<p class="two-lines">
This text has lines both above and below it. Only the bottom one is offset.
</p>
css
p {
text-decoration: underline wavy red;
text-underline-offset: 1em;
}
.two-lines {
text-decoration-color: purple;
text-decoration-line: underline overline;
}
規範
| 規範 |
|---|
| CSS 文字裝飾模組第 4 級 # 下劃線偏移 |
瀏覽器相容性
載入中…