CSS - text-underline-offset 屬性

text-underline-offset 屬性設定下劃線文字裝飾線與其初始位置的距離。

可能的值

auto：瀏覽器選擇下劃線的適當偏移量。
<length>：任何具有指定單位的有效長度（包括負值）。
<percentage>：指定下劃線的偏移量，為元素字型中 1em 的百分比。

應用於

所有 HTML 元素，除了表格行組、行、列組和列。

DOM 語法

object.style.UnderlineOffset =  auto ;

CSS text-underline-offset - 基本示例

以下示例演示如何使用text-underline-offset 屬性

<html>
<head>
<style>
    p {
        text-decoration: underline red;
    }
    .lineone {
        text-underline-offset: auto;
    }
    .linetwo{
        text-decoration-color: purple;
        text-decoration-line: underline overline;
        text-underline-offset: 1em;
    }
    .linethree {
        xt-underline-offset: 8px;
    }
    .linefour {
        text-underline-offset: -9px;
    }
</style>
</head>
<body>
    <h2>Text underline-offset</h2>
    <p class="lineone">Here is some text with a red underline!</p>
    <br />
    <p class="linetwo">
    This text has lines both above and below it. Only the bottom one is offset.
    </p>
    <br />
    <p class="linethree">
    This text has a red underline with offset 8px.
    </p>
    <br />

    <p class="linefour">
    This text has a red underline with offset -8px.
    </p>
</body>
</html>

列印頁面