text-underline-offset

Setting the distance of a text decoration line from its original position.

Overview

Examples

Move underline away from text

Use text-underline-offset:* to control the distance between text and its underline.

<a class="underline text-underline-offset:4px">    Read more</a>

@layer utilities {    .text-underline-offset\:4px {        text-underline-offset: 4px    }}

Pair with decoration thickness

Larger underline offsets often need a matching decoration thickness so the underline still feels intentional.

<a class="underline text-decoration-thickness:2px text-underline-offset:2px">    Active section</a>

Reset in compact contexts

Use text-underline-offset:0 for dense table or navigation labels when extra offset takes too much space.

<a class="text-underline-offset:4px text-underline-offset:0@sm">Compact link</a>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<a class="text-underline-offset:4px:hover text-underline-offset:2px@sm text-underline-offset:0@print">...</a>