タイポグラフィー
テキストの下線のオフセットを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
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 ユーティリティを使用して、テキストの下線のオフセットを変更します
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>] 構文 を設定するにはテキストの下線のオフセット完全にカスタム値に基づいて
<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() 関数を自動的に追加します。
プレフィックスa text-underline-offset ユーティリティ md: のようなブレークポイントバリアントをプレフィックスとして使用して、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみです
<p class="underline md:underline-offset-4 ..."> Lorem ipsum dolor sit amet...</p>バリアントドキュメントでバリアントの使用方法の詳細をご覧ください。