Specifies the text decoration of the text inside an element.
| Class | Properties | |
|---|---|---|
| underline | text-decoration: underline; | |
| line-through | text-decoration: line-through; | |
| no-underline | text-decoration: no-underline; |
<div class="flex flex-wrap align-items-center justify-content-center">
<div class="surface-overlay border-round border-1 p-3 m-3 w-16rem min-h-full flex align-items-center justify-content-center">
<p class="underline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="surface-overlay border-round border-1 p-3 m-3 w-16rem min-h-full flex align-items-center justify-content-center">
<p class="line-through">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="surface-overlay border-round border-1 p-3 m-3 w-16rem min-h-full flex align-items-center justify-content-center">
<a href="#" class="no-underline">
Link with no underline
</a>
</div>
</div>
Focus, Hover and Active states are available with the focus:, hover:, active: prefixes respectively.
<div class="flex flex-wrap align-items-center justify-content-center card-container">
<div class="surface-overlay border-round border-1 p-3 m-3 w-16rem min-h-full">
<a href="#" class="no-underline hover:underline">
Link with no underline
</a>
</div>
</div>