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>