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