Text Decoration

Underline #

Use d-td-underline to underline text.

<p class="d-td-underline">...</p>

Dotted #

Use d-td-dotted to apply a dotted underline style to the text.

<p class="d-td-dotted">...</p>

Line Through #

Use d-td-line-through to apply a line through the text.

<p class="d-td-line-through">...</p>

No Decorations #

Use d-td-none to remove text decorations.

<p class="d-td-none">...</p>

Hover #

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>

Focus #

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>

Focus Visible #

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>

Classes #