Link text decoration
The link text decoration class sets the text-decoration property. It adds or removes an underline to a link.
Overview | CSS Shortcut class | Applied style |
link-underline
| text-decoration: underline;
text-underline-position: under;
|
link-no-underline
| text-decoration: none;
|
Examples
Underline
link-underline
<a href="#" class="link-underline">
This link is underlined.
</a>
No underline
link-no-underline
<a href="#" class="link-no-underline">
This link is not underlined.
</a>
Conditional styling Apply this style to specific screen sizes Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are: xs: > 480pxsm: > 640pxmd: > 768pxlg: > 1024pxxl: > 1280px
<div class="xs:link-underline ...">
...
</div>
Learn more about the responsive layout prefix.
Apply this style to specific states Use a state prefix to apply this class only to a specified interaction state. The available states are: <div class="hover:link-underline ...">
...
</div>
Learn more about the state prefix. 2025-10-01