Contents
Quick reference
| Class | Properties |
|---|---|
.decoration-solid | text-decoration-style: solid; |
.decoration-double | text-decoration-style: double; |
.decoration-dotted | text-decoration-style: dotted; |
.decoration-dashed | text-decoration-style: dashed; |
.decoration-wavy | text-decoration-style: wavy; |
Basic usage
Setting the text decoration style
Use the decoration-{style} utilities to change the style of an element’s text decoration.
decoration-solid
The quick brown fox jumps over the lazy dog.
decoration-double
The quick brown fox jumps over the lazy dog.
decoration-dotted
The quick brown fox jumps over the lazy dog.
decoration-dashed
The quick brown fox jumps over the lazy dog.
decoration-wavy
The quick brown fox jumps over the lazy dog.
<p class="text-decoration-underline decoration-solid ...">The quick brown fox...</p>
<p class="text-decoration-underline decoration-double ...">The quick brown fox...</p>
<p class="text-decoration-underline decoration-dotted ...">The quick brown fox...</p>
<p class="text-decoration-underline decoration-dashed ...">The quick brown fox...</p>
<p class="text-decoration-underline decoration-wavy ...">The quick brown fox...</p>
Edit this page on Github
Last updated on April 6, 2024