# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/text-decoration-line.mdx

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

<ApiTable
  rows={[
    ["underline", "text-decoration-line: underline;"],
    ["overline", "text-decoration-line: overline;"],
    ["line-through", "text-decoration-line: line-through;"],
    ["no-underline", "text-decoration-line: none;"],
  ]}
/>

## Examples

### Underling text

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

<Figure>

<Example>
  {
    <p className="text-center text-lg font-medium text-gray-900 underline dark:text-gray-200">
      The quick brown fox jumps over the lazy dog.
    </p>
  }
</Example>

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

</Figure>

### Adding an overline to text

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

<Figure>

<Example>
  {
    <p className="text-center text-lg font-medium text-gray-900 overline dark:text-gray-200">
      The quick brown fox jumps over the lazy dog.
    </p>
  }
</Example>

```html
<!-- [!code classes:overline] -->
<p class="overline">The quick brown fox...</p>
```

</Figure>

### Adding a line through text

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

<Figure>

<Example>
  {
    <p className="text-center text-lg font-medium text-gray-900 line-through dark:text-gray-200">
      The quick brown fox jumps over the lazy dog.
    </p>
  }
</Example>

```html
<!-- [!code classes:line-through] -->
<p class="line-through">The quick brown fox...</p>
```

</Figure>

### Removing a line from text

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

<Figure>

<Example>
  {
    <p className="text-center text-lg font-medium text-gray-900 no-underline dark:text-gray-200">
      The quick brown fox jumps over the lazy dog.
    </p>
  }
</Example>

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

</Figure>

### Applying on hover

<TargetingSpecificStates property="text-decoration-line">

<Figure hint="Hover over the text to see the expected behavior">

<Example>
  {
    <div className="text-center text-lg font-medium text-gray-900 no-underline dark:text-gray-200">
      The{" "}
      <a
        href="https://en.wikipedia.org/wiki/The_quick_brown_fox_jumps_over_the_lazy_dog"
        target="blank"
        className="text-sky-600 no-underline hover:underline dark:text-sky-400"
      >
        quick brown fox
      </a>{" "}
      jumps over the lazy dog.
    </div>
  }
</Example>

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

</Figure>

</TargetingSpecificStates>

### Responsive design

<ResponsiveDesign
  element="a"
  elementAttributes={{ href: "..." }}
  property="text-decoration-line"
  defaultClass="no-underline"
  featuredClass="underline"
/>