Sections

Text decoration

Utilities for controlling the decoration of text.

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.

The quick brown fox jumped over the lazy dog.

<p class="underline ...">The quick brown fox jumped over the lazy dog.</p>

Use the .line-through utility to strike out text.

The quick brown fox jumped over the lazy dog.

<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.