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>

打印页面