Text decoration

Class reference

# Underline

Use the .underline utility to underline text.

<p class="underline ...">The quick brown fox ...</p>

# Line Through

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

<p class="line-through ...">The quick brown fox ...</p>

# No Underline

Use the .no-underline utility to remove underline or line-through styling.

<a href="#" class="no-underline ...">Link with no underline</a>

# Responsive

To control the text decoration of an element at a specific breakpoint, add a {screen}: prefix to any existing text decoration utility. For example, use md:underline to apply the underline utility at only medium screen sizes and above.

<p class="no-underline **md:underline** ...">
  The quick brown fox jumped over the lazy dog.
</p>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.

# Hover

To control the text decoration of an element on hover, add the hover: prefix to any existing text decoration utility. For example, use hover:underline to apply the underline utility on hover.

<a href="#" class="no-underline hover:underline ...">Link</a>

Hover utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the hover: prefix.

<a href="#" class="... md:no-underline md:hover:underline ...">Link</a>

# Focus

To control the text decoration of an element on focus, add the focus: prefix to any existing text decoration utility. For example, use focus:underline to apply the underline utility on focus.

<input class="focus:underline ..." value="Focus me">

Focus utilities can also be combined with responsive utilities by adding the responsive {screen}: prefix before the focus: prefix.

<input class="md:focus:underline ..." value="Focus me">
`