CSS 属性

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">这是一些带有红色下划线的文本！</p>
    <br />
    <p class="linetwo">
    该文本的上方和下方都有线条。 只有底部的一个是偏移的。
    </p>
    <br />
    <p class="linethree">
    该文本有红色下划线，偏移量为 8px。
    </p>
    <br />

    <p class="linefour">
    该文本有红色下划线，偏移量为 -8px。
    </p>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39