Text Decoration Line

Controls the text decoration line of an element.

Class	Style
`tdl-lt`	`text-decoration-line: line-through`
`tdl-none`	`text-decoration-line: none`
`tdl-o`	`text-decoration-line: overline`
`tdl-u`	`text-decoration-line: underline`

Line Through

The text will be displayed with a line through it, indicating that it is struck out.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg p-4 rad-1 ta-c tc-slate tdl-lt">Sphinx of black quartz, judge my vow.</p>
</div>

None

The text will be displayed without any decoration lines.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg p-4 rad-1 ta-c tc-slate tdl-none">Sphinx of black quartz, judge my vow.</p>
</div>

Underline

The text will be displayed with an underline, emphasizing the content.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg p-4 rad-1 ta-c tc-slate tdl-u">Sphinx of black quartz, judge my vow.</p>
</div>

Overline

The text will be displayed with a line above it.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-lg p-4 rad-1 ta-c tc-slate tdl-o">Sphinx of black quartz, judge my vow.</p>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Using media queries

You can combine responsive breakpoints like sm:tdl-*, md:tdl-*, lg:tdl-*, and xxl:tdl-* to allow targeting specific utilities in different viewports.

Using hover states

Alternatively, you can apply :hover by using h:tdl-* utility to override elements and change their values when hovering over them.