Contents
Quick reference
| 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.
underline
The quick brown fox jumps over the lazy dog.
line-through
The quick brown fox jumps over the lazy dog.
overline
The quick brown fox jumps over the lazy dog.
no-decoration
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.
<a href="#" class="text-decoration-none">This link has its text decoration removed</a> Edit this page on Github
Last edited by zhengchun on November 30, 2023