排版
控制文本下划线偏移量的工具类。
| Class | Styles |
|---|---|
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-<number> 工具类，如 underline-offset-2 和 underline-offset-4 来改变文本下划线的偏移量：
快的棕色狐狸跳过懒狗。
快的棕色狐狸跳过懒狗。
快的棕色狐狸跳过懒狗。
快的棕色狐狸跳过懒狗。
<p class="underline underline-offset-1">快的棕色狐狸...</p><p class="underline underline-offset-2">快的棕色狐狸...</p><p class="underline underline-offset-4">快的棕色狐狸...</p><p class="underline underline-offset-8">快的棕色狐狸...</p>Use the underline-offset-[<value>] syntax to set the 文本下划线偏移量 based on a completely custom value:
<p class="underline-offset-[3px] ..."> Lorem ipsum dolor sit amet...</p>For CSS variables, you can also use the underline-offset-(<custom-property>) syntax:
<p class="underline-offset-(--my-underline-offset) ..."> Lorem ipsum dolor sit amet...</p>This is just a shorthand for underline-offset-[var(<custom-property>)] that adds the var() function for you automatically.
Prefix a text-underline-offset utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="underline md:underline-offset-4 ..."> Lorem ipsum dolor sit amet...</p>Learn more about using variants in the variants documentation.