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">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>