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ユーティリティを使用します。

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>

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。