Tailwind CSS - 文字下劃線偏移

Tailwind CSS **文字下劃線**偏移是一組預定義的類，它們調整下劃線相對於其應用到的文字的垂直位置，使您可以控制下劃線出現在基線下方多遠。

Tailwind CSS 文字下劃線偏移類

下面列出了 Tailwind CSS 文字下劃線偏移類及其屬性，這些屬性調整下劃線相對於其預設文字對齊方式的位置。

類	CSS 屬性
underline-offset-auto	text-underline-offset: auto;
underline-offset-0	text-underline-offset: 0px;
underline-offset-1	text-underline-offset: 1px;
underline-offset-2	text-underline-offset: 2px;
underline-offset-4	text-underline-offset: 4px;
underline-offset-8	text-underline-offset: 8px;

Tailwind CSS 文字下劃線偏移類的功能

**underline-offset-auto:** 此類根據字型大小和文字內容自動調整下劃線位置。
**underline-offset-0:** 此類將下劃線放置在文字的正下方，保持其預設對齊方式。
**underline-offset-1:** 此類將下劃線稍微向下移動到文字基線以下 1 畫素。
**underline-offset-2:** 此類將下劃線向下移動到文字基線以下 2 畫素。
**underline-offset-4:** 此類將下劃線向下移動到文字基線以下 4 畫素。
**underline-offset-8:** 此類將下劃線向下移動到文字基線以下 8 畫素。

Tailwind CSS 文字下劃線偏移類示例

以下是 **Tailwind CSS 文字下劃線偏移**類的示例，這些示例顯示瞭如何調整下劃線相對於其預設文字對齊方式的位置。

調整文字下劃線偏移

此示例顯示了使用 Tailwind CSS 文字下劃線偏移類來調整下劃線相對於其應用到的文字的位置。它透過對應用於自定義下劃線放置的不同類來顯示各種樣式，以滿足特定需求。

示例

 
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Text Underline Offset
    </h2> 
    <p class="underline underline-offset-auto mb-4">
        This text has Underline Offset -auto,
    </p> 
    <p class="underline underline-offset-0 mb-4">
        This text has Underline Offset -0.
    </p>
    <p class="underline underline-offset-1 mb-4">
        This text has Underline Offset -1.
    </p>
    <p class="underline underline-offset-2 mb-4">
        This text has Underline Offset -2.
    </p> 
    <p class="underline underline-offset-4 mb-4">
        This text has Underline Offset -4.
    </p> 
    <p class="underline underline-offset-8">
        This text has Underline Offset -8.
    </p> 
</body>

</html>

懸停時文字下劃線偏移

此示例顯示了使用 Tailwind CSS 文字下劃線偏移類來調整下劃線文字的位置。將滑鼠懸停在每個段落上，以檢視不同的類（-auto、-0、-1、-2、-4、-8）如何修改下劃線相對於文字的位置。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Text Underline Offset
    </h2>
    <p class="text-xl font-semibold mb-2 underline">
         Hover to see Text Underline Offset Classes
    </p> 
    <p class="underline-offset-auto hover:underline mb-4">
        This text has Underline Offset -auto,
    </p> 
    <p class="underline-offset-0 hover:underline mb-4">
        This text has Underline Offset -0.
    </p>
    <p class="underline-offset-1 hover:underline mb-4">
        This text has Underline Offset -1.
    </p>
    <p class="underline-offset-2 hover:underline mb-4">
        This text has Underline Offset -2.
    </p> 
    <p class="underline-offset-4 hover:underline mb-4">
        This text has Underline Offset -4.
    </p> 
    <p class="underline-offset-8 hover:underline">
        This text has Underline Offset -8.
    </p> 
</body>

</html>

列印頁面