text decoration line

Utilities for controlling the decoration of text.

2025-03-29

Written by: tdtc

Underling text

Use the underline utility to add an underline to the text of an element:

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

Adding an overline to text

Use the overline utility to add an overline to the text of an element:

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

Adding a line through text

Use the line-through utility to add a line through the text of an element:

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

Removing a line from text

Use the no-underline utility to remove a line from the text of an element:

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

Applying on hover

Prefix a text-decoration-line utility with a variant like hover:* to only apply the utility in that state:

<p>The <a href="..." class="no-underline hover:underline ...">quick brown fox</a> jumps over the lazy dog.</p>

Ref

• text decoration line
• Responsive design