Các tiện ích để kiểm soát offset của gạch chân văn bản.
| 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>; |
Sử dụng các tiện ích underline-offset-<number> như underline-offset-2 và underline-offset-4 để thay đổi offset của gạch chân văn bản:
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
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>Use the underline-offset-[<value>] syntax to set the text underline offset 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.