text-decoration-line

控制文本装饰的工具类。

类样式

类	样式
`下划线`	`text-decoration-line: underline;`
`上划线`	`text-decoration-line: overline;`
`删除线`	`text-decoration-line: line-through;`
`无下划线`	`text-decoration-line: none;`

下划线

text-decoration-line: underline;

上划线

text-decoration-line: overline;

删除线

text-decoration-line: line-through;

无下划线

text-decoration-line: none;

示例

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

敏捷的棕色狐狸跳过了懒惰的狗。

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

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

敏捷的棕色狐狸跳过了懒惰的狗。

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

使用 line-through 工具类为元素的文本添加删除线

敏捷的棕色狐狸跳过了懒惰的狗。

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

使用 no-underline 工具类删除元素文本上的线

敏捷的棕色狐狸跳过了懒惰的狗。

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

前缀a text-decoration-line 工具类与像这样的变体 hover:* 仅在该状态下应用工具类

悬停在文本上以查看预期行为

这个敏捷的棕色狐狸跳过了懒惰的狗。

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

在变体文档中了解有关使用变体的更多信息。

前缀a text-decoration-line 工具类与像 md: 这样的断点变体一起使用，仅在中等屏幕尺寸及以上应用该工具类

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

在变体文档中了解有关使用变体的更多信息。