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.
<p class="underline">The quick brown fox...</p>
为文本添加上划线
使用 overline 工具为元素的文本添加上划线：
The quick brown fox jumps over the lazy dog.
<p class="overline">The quick brown fox...</p>
为文本添加删除线
使用 line-through 工具为元素的文本添加删除线：
The quick brown fox jumps over the lazy dog.
<p class="line-through">The quick brown fox...</p>
移除文本上的线条
使用 no-underline 工具移除元素文本上的线条：
The quick brown fox jumps over the lazy dog.
<p class="no-underline">The quick brown fox...</p>
悬停时应用
在 text-decoration-line 工具前加上像 `hover:*** 这样的变体，以便只在该状态下应用该工具：
将鼠标悬停在文本上以查看预期行为
The
quick brown fox
jumps over the lazy dog.
<p>The <a href="..." class="no-underline hover:underline ...">quick brown fox</a> jumps over the lazy dog.</p>
在 变体文档 中了解更多关于使用变体的信息。
响应式设计
在 text-decoration-line 工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：
<a class="no-underline md:underline ..." href="...">
</a>
在 变体文档 中了解更多关于使用变体的信息。