text-decoration-line

用于控制文本装饰线的工具类。

快速参考

类	属性
underline	text-decoration-line: underline;
overline	text-decoration-line: overline;
line-through	text-decoration-line: line-through;
no-underline	text-decoration-line: none;

示例

为文本添加下划线

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

The quick brown fox jumps over the lazy dog.

<!-- [!code classes:underline] -->
<p class="underline">The quick brown fox...</p>

为文本添加上划线

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

The quick brown fox jumps over the lazy dog.

<!-- [!code classes:overline] -->
<p class="overline">The quick brown fox...</p>

为文本添加删除线

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

The quick brown fox jumps over the lazy dog.

<!-- [!code classes:line-through] -->
<p class="line-through">The quick brown fox...</p>

移除文本上的装饰线

使用 no-underline 工具类移除元素文本上的装饰线：

The quick brown fox jumps over the lazy dog.

<!-- [!code classes:no-underline] -->
<p class="no-underline">The quick brown fox...</p>

在悬停时应用

使用 hover:* 等变体前缀，即可让 text-decoration-line 工具类仅在该状态下生效：

The quick brown fox jumps over the lazy dog.

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

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

响应式设计

使用 md: 等断点变体前缀，即可让 text-decoration-line 工具类仅在中等及以上屏幕尺寸下生效：

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

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