Skip to content
Support Yumma CSS by starring us on GitHub!

Text Decoration Line

Controls the text decoration line of an element

Class Properties

tdl-lt

text-decoration-line: line-through;

tdl-none

text-decoration-line: none;

tdl-u

text-decoration-line: underline;

tdl-o

text-decoration-line: overline;

Line Through

This example sets the text decoration line to line-through. The text will be displayed with a line through it, indicating that it is struck out.

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
<p class="bg-white fs-sm p-4 rad-1 ta-c tc-lead tdl-lt">The quick brown fox jumps over the lazy dog.</p>
</div>

None

This example sets the text decoration line to none. The text will be displayed without any decoration lines.

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
<p class="bg-white fs-sm p-4 rad-1 ta-c tc-lead tdl-none">The quick brown fox jumps over the lazy dog.</p>
</div>

Underline

This example sets the text decoration line to underline. The text will be displayed with an underline, emphasizing the content.

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
<p class="bg-white fs-sm p-4 rad-1 ta-c tc-lead tdl-u">The quick brown fox jumps over the lazy dog.</p>
</div>

Overline

This example sets the text decoration line to overline. The text will be displayed with a line above it.

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
<p class="bg-white fs-sm p-4 rad-1 ta-c tc-lead tdl-o">The quick brown fox jumps over the lazy dog.</p>
</div>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Responsive breakpoints

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

<div class="tdl-none md:tdl-u ..."></div>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

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

<div class="tdl-none h:tdl-u ..."></div>