text-decoration-line

示例(Examples)

¥Examples

下划线文本(Underling text)

¥Underling text

使用 underline 工具为元素的文本添加下划线：

¥Use the underline utility to add an underline to the text of an element:

<p class="underline">The quick brown fox...</p>

在文本中添加上划线(Adding an overline to text)

¥Adding an overline to text

使用 overline 工具为元素的文本添加上划线：

¥Use the overline utility to add an overline to the text of an element:

<p class="overline">The quick brown fox...</p>

在文本中添加一条线(Adding a line through text)

¥Adding a line through text

使用 line-through 工具在元素的文本中添加一行：

¥Use the line-through utility to add a line through the text of an element:

<p class="line-through">The quick brown fox...</p>

从文本中删除一行(Removing a line from text)

¥Removing a line from text

使用 no-underline 工具从元素的文本中删除一行：

¥Use the no-underline utility to remove a line from the text of an element:

<p class="no-underline">The quick brown fox...</p>

悬停时应用(Applying on hover)

¥Applying on hover

在 text-decoration-line 工具前面加上一个变体，例如 hover:*，以便仅在该状态下应用该工具：

<p>The <a href="..." class="no-underline hover:underline ...">quick brown fox</a> jumps over the lazy dog.</p>

请参阅 变体文档 详细了解如何使用变体。

响应式设计(Responsive design)

¥Responsive design

在 text-decoration-line 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

<a class="no-underline md:underline ..." href="...">  <!-- ... --></a>

请参阅 变体文档 详细了解如何使用变体。