CSS - text-underline-offset 属性

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>

打印本页