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.