Tailwind CSS - Text Underline Offset
Tailwind CSS Text Underline Offset 是一组预定义类，用于调整下划线相对于所应用文本的垂直位置，从而允许您控制下划线在基线下方的显示距离。
Tailwind CSS Text Underline Offset 类
以下是 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>
