| Class | Properties |
|---|---|
.underline | text-decoration: underline; |
.line-through | text-decoration: line-through; |
.no-underline | text-decoration: none; |
Usage
Use the .underline utility to underline text.
<p class="underline ...">The quick brown fox jumped over the lazy dog.</p>Use the .line-through utility to strike out text.
<p class="line-through ...">The quick brown fox jumped over the lazy dog.</p>Use the .no-underline utility to remove underline (or line-through) styles.
<a class="no-underline ..." href="#">A link with no underline.</a>Variants
By default, only hover-state variants are generated for text decoration utilities.
Responsive
To include responsive variants like .md:line-through, add "text-decoration" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:
$responsive-variants: (
// ...
"text-decoration",
);
Hover-state
To control the text decoration of an element on hover, add the hover: prefix to any existing text color utility.
For example, use hover:no-underline to apply the no-underline utility when the mouse is hovered over the element.