Lzh on GitHub

text-underline-offset

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

快速参考

类别样式
underline-offset-<number>text-underline-offset: <number>px;
-underline-offset-<number>text-underline-offset: calc(<number>px * -1);
underline-offset-autotext-underline-offset: auto;
underline-offset-(<custom-property>)text-underline-offset: var(<custom-property>);
underline-offset-<value>text-underline-offset: <value>;

示例

基本示例

使用 underline-offset-<number> 工具（例如 underline-offset-2 和 underline-offset-4）来改变文本下划线的偏移：

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.

<p class="underline underline-offset-1">The quick brown fox...</p>
<p class="underline underline-offset-2">The quick brown fox...</p>
<p class="underline underline-offset-4">The quick brown fox...</p>
<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() 函数。

响应式设计

在 text-underline-offset 工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：

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

在 变体文档 中了解更多关于使用变体的信息。