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.
Sphinx of black quartz, judge my vow.
<p class="fs-lg ta-c tc-slate tdl-lt">Sphinx of black quartz, judge my vow.</p>None
The text will be displayed without any decoration lines.
Sphinx of black quartz, judge my vow.
<p class="fs-lg ta-c tc-slate tdl-none">Sphinx of black quartz, judge my vow.</p>Underline
The text will be displayed with an underline, emphasizing the content.
Sphinx of black quartz, judge my vow.
<p class="fs-lg ta-c tc-slate tdl-u">Sphinx of black quartz, judge my vow.</p>Overline
The text will be displayed with a line above it.
Sphinx of black quartz, judge my vow.
<p class="fs-lg ta-c tc-slate tdl-o">Sphinx of black quartz, judge my vow.</p>Using utility variants
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
Targeting different viewports
You can combine responsive breakpoints like sm:tdl-*, md:tdl-*, lg:tdl-*, and xxl:tdl-* to allow targeting specific utilities in different viewports.
Targeting hover states
Alternatively, you can apply :hover by using h:tdl-* utility to override elements and change their values when hovering over them.