Underline, strike through, or remove the decoration from text.
| Class | Styles |
|---|---|
| .text-decoration-none | text-decoration: none; |
| .text-decoration-underline | text-decoration: underline; |
| .text-decoration-line-through | text-decoration: line-through; |
On this page
Text decoration
Decorate text in components with text decoration classes.
This text has a line underneath it.
This text has a line going through it.
This link has its text decoration removed<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>For the underline colour, offset and thickness on links, see link utilities.
Customizing
Utilities API
Text decoration utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.
"text-decoration": (
property: text-decoration,
values: none underline line-through
),