Typography

Text Underline Offset

Utilities for controlling the offset of a text underline.

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 className="underline **underline-offset-1** ...">The quick brown fox...</p>
<p className="underline **underline-offset-2** ...">The quick brown fox...</p>
<p className="underline **underline-offset-4** ...">The quick brown fox...</p>
<p className="underline **underline-offset-8** ...">The quick brown fox...</p>