Text decoration line

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, TargetingSpecificStates } from "@/components/content.tsx";

export const title = "text-decoration-line"; export const description = "Utilities for controlling the decoration of text.";

Examples

Underling text

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

{

The quick brown fox jumps over the lazy dog.

}

<!-- [!code classes:underline] -->
<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:

{

The quick brown fox jumps over the lazy dog.

}

<!-- [!code classes:overline] -->
<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:

{

The quick brown fox jumps over the lazy dog.

}

<!-- [!code classes:line-through] -->
<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:

{

The quick brown fox jumps over the lazy dog.

}

<!-- [!code classes:no-underline] -->
<p class="no-underline">The quick brown fox...</p>

Applying on hover

{

The{" "} quick brown fox {" "} jumps over the lazy dog.

}

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

Responsive design