Utilities to change an element's text decoration styles.
Use d-td-underline to underline text.
<p class="d-td-underline">The quick brown fox jumps over the lazy dog.</p>
Use d-td-dotted to apply a dotted underline style to the text.
<p class="d-td-dotted">The quick brown fox jumps over the lazy dog.</p>
Use d-td-line-through to apply a line through the text.
<p class="d-td-line-through">The quick brown fox jumps over the lazy dog.</p>
Use d-td-none to remove text decorations.
<p class="d-td-none">The quick brown fox jumps over the lazy dog.</p>
Use h:d-td-{n} to change an element's :hover state text decoration.
<dt-button kind="unstyled" class="h:d-td-underline"> The quick brown fox jumps over the lazy dog. </dt-button>
Use f:d-td-{n} to change an element's :focus and :focus-within state text decoration.
<dt-button kind="unstyled" class="f:d-td-underline"> The quick brown fox jumps over the lazy dog. </dt-button>
Use fv:d-td-{n} to change an element's :focus-visible state text decoration [only when focused by keyboard].
<dt-button kind="unstyled" class="fv:d-td-underline"> The quick brown fox jumps over the lazy dog. </dt-button>
Class
|
Output
|
|---|---|
| .d-td-none | text-decoration: none !important |
| .d-td-underline | text-decoration: underline !important |
| .d-td-dotted | text-decoration: underline dotted !important |
| .d-td-line-through | text-decoration: line-through !important |
| .d-td-unset | text-decoration: unset !important |
Text Decoration documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope