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

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>

前缀a 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>

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

前缀a text-decoration-line 实用程序带有断点变体，例如 md:，以仅在中等medium 屏幕尺寸及以上应用实用程序

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

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