text-underline-offset

用于控制文本下划线偏移的工具类。

快速参考

类	属性
underline-offset-<number>	text-underline-offset: <number>px;
-underline-offset-<number>	text-underline-offset: calc(<number>px * -1);
underline-offset-auto	text-underline-offset: auto;
underline-offset-(<custom-property>)	text-underline-offset: var(<custom-property>);
underline-offset-[<value>]	text-underline-offset: <value>;

示例

基础示例

使用 underline-offset-2、underline-offset-4 等 underline-offset-<number> 工具类，更改文本下划线的偏移：

underline-offset-1

The quick brown fox jumps over the lazy dog.

underline-offset-2

The quick brown fox jumps over the lazy dog.

underline-offset-4

The quick brown fox jumps over the lazy dog.

underline-offset-8

The quick brown fox jumps over the lazy dog.

<!-- [!code classes:underline-offset-1] -->
<p class="underline underline-offset-1">The quick brown fox...</p>
<!-- [!code classes:underline-offset-2] -->
<p class="underline underline-offset-2">The quick brown fox...</p>
<!-- [!code classes:underline-offset-4] -->
<p class="underline underline-offset-4">The quick brown fox...</p>
<!-- [!code classes:underline-offset-8] -->
<p class="underline underline-offset-8">The quick brown fox...</p>

使用自定义值

使用 underline-offset-[<value>] 等工具类，根据完全自定义的值设置文本下划线偏移：

<p class="underline-offset-[3px] ...">
 Lorem ipsum dolor sit amet...
</p>

对于 CSS 变量，也可以使用 underline-offset-(<custom-property>) 语法：

<p class="underline-offset-(--my-underline-offset) ...">
 Lorem ipsum dolor sit amet...
</p>

这只是 underline-offset-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

使用 md: 等断点变体作为 text-underline-offset 工具类的前缀，即可只在中等屏幕尺寸及以上应用该工具类：

<p class="underline md:underline-offset-4 ...">
 Lorem ipsum dolor sit amet...
</p>

更多关于变体的用法，请参阅变体文档。