text-decoration-thickness
Controls the thickness of text decoration lines. Used to create thicker or thinner decoration lines than default.
Class List
Pattern: tdt{value}{unit}
| Class | CSS | Description |
|---|---|---|
tdt1px | text-decoration-thickness: 1px | 1px thickness (thin underline) |
tdt2px | text-decoration-thickness: 2px | 2px thickness |
tdt3px | text-decoration-thickness: 3px | 3px thickness |
tdt4px | text-decoration-thickness: 4px | 4px thickness (bold emphasis) |
tdt0-2rem | text-decoration-thickness: 0.2rem | 0.2rem thickness |
Visual Comparison
1px — tdt1px
Decoration thickness
2px — tdt2px
Decoration thickness
3px — tdt3px
Decoration thickness
4px — tdt4px
Decoration thickness
Usage Examples
<!-- Thin underline -->
<a href="#" class="tdu tdt1px c38BDF8">Thin underline link</a>
<!-- Bold underline emphasis -->
<span class="tdu tdt4px">Emphasized with bold underline</span>
<!-- Thickness change on hover -->
<a href="#" class="tdu tdt1px hover-tdt3px tall200msease c38BDF8">
Underline gets thicker on hover
</a>Tips & Notes
text-decoration required
A decoration line like tdu or tdlt must be active for thickness to apply.