text-decoration-style
Controls the style of text decoration lines (underline, strikethrough, etc.). tdsw is commonly used for spell-check style wavy underlines.
Class List
| Class | CSS | Description |
|---|---|---|
tdss | text-decoration-style: solid | Solid line (default) |
tdsd | text-decoration-style: dashed | Dashed line |
tdsdt | text-decoration-style: dotted | Dotted line |
tdsw | text-decoration-style: wavy | Wavy line. Used for spell-check style |
tdsdb | text-decoration-style: double | Double line |
Visual Comparison
Compares how each style affects the underline.
solid (default) — tdss
The quick brown fox jumps over the lazy dog
dashed — tdsd
The quick brown fox jumps over the lazy dog
dotted — tdsdt
The quick brown fox jumps over the lazy dog
wavy — tdsw
The quick brown fox jumps over the lazy dog
double — tdsdb
The quick brown fox jumps over the lazy dog
Usage Examples
<!-- Wavy underline (spellcheck style) -->
<span class="tdu tdsw">Text with a typo</span>
<!-- Dashed underline -->
<a href="#" class="tdu tdsd c38BDF8">Abbreviation link</a>
<!-- Double underline emphasis -->
<span class="tdu tdsdb">Important text</span>Tips & Notes
Use with text-decoration
text-decoration-style must be combined with tdu (underline), tdo (overline), tdlt (line-through), etc. to be visible.
Spell-check style with wavy
Combining tdsw with a red decoration line creates a style similar to editor spell-check error indicators.