Text Decoration

Utilities for controlling the decoration of text.

Contents

Decorate text in components with text decoration classes.

Class	Properties
`.text-decoration-none`	text-decoration: none;
`.text-decoration-underline`	text-decoration: underline;
`.text-decoration-line-through`	text-decoration: line-through;
`.text-decoration-overline`	text-decoration: overline;

Basic usage

Setting the text decoration

Control how text is decorated with the text-decoration-underline, text-decoration-none, and text-decoration-line-through utilities.

text-decoration-underline

The quick brown fox jumps over the lazy dog.

text-decoration-line-through

The quick brown fox jumps over the lazy dog.

text-decoration-overline

The quick brown fox jumps over the lazy dog.

text-decoration-none

The quick brown fox jumps over the lazy dog.

<p class="text-decoration-underline ...">The quick brown fox ...</p>
<p class="text-decoration-line-through ...">The quick brown fox ...</p>
<p class="text-decoration-overline ...">The quick brown fox ...</p>
<p class="text-decoration-none ...">The quick brown fox ...</p>

Remove underline from link

Remove the link underline when mouse on <a> element using text-decoration-none.

This link has its text decoration removed

<a href="#" class="text-decoration-none">This link has its text decoration removed</a>