Typography
用於控制文字底線偏移量的通用類別。
| 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-2 和 underline-offset-4 等 underline-offset-<number> 通用類別來變更文字底線的偏移量：
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>使用 underline-offset-[<value>] 語法，根據完全自訂的值來設定 text underline offset：
<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>在變體文件中了解更多關於使用變體的資訊。