Contents
Quick reference
| Class | Properties |
|---|---|
.decoration-auto | text-decoration-thickness: auto; |
.decoration-from-font | text-decoration-thickness: from-font; |
.decoration-0 | text-decoration-thickness: 0px; |
.decoration-1 | text-decoration-thickness: 1px; |
.decoration-2 | text-decoration-thickness: 2px; |
.decoration-4 | text-decoration-thickness: 4px; |
.decoration-8 | text-decoration-thickness: 8px; |
Basic usage
Setting the text decoration thickness
Use the decoration-{width} utilities to change the thickness of an element’s text decoration.
decoration-1
The quick brown fox jumps over the lazy dog.
decoration-2
The quick brown fox jumps over the lazy dog.
decoration-4
The quick brown fox jumps over the lazy dog.
<p class="text-decoration-underline decoration-1 ...">The quick brown fox...</p>
<p class="text-decoration-underline decoration-2 ...">The quick brown fox...</p>
<p class="text-decoration-underline decoration-4 ...">The quick brown fox...</p>
Edit this page on Github
Last updated on April 6, 2024