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

Text Underline Offset

Quick reference

Basic usage

Setting the underline offset