Setting Underline Position and Spacing with CSS

Learn how to set the position and spacing between underlines applied using the text-decoration property.

Adding underlines to text is a very common practice in web styling.
While you can easily create an underline simply by using text-decoration: underline, CSS provides more precise control over the underline’s position and spacing.

CSS offers two properties for adjusting underline position and spacing:

  • The text-underline-position property finely specifies the position used as the basis for underlines.
  • The text-underline-offset property defines the spacing (offset) from that baseline, allowing for fine-tuned adjustment.

Each property manages either the position or spacing of the underline, and when used together, they enable the creation of more refined and readable underline styles.

Next, we'll explore the definitions and usage of these two properties.

text-underline-position – Finely Controlling Where Underlines Are Drawn

In CSS, you can finely control where underlines are drawn in relation to the text.
While underlines are typically thought of as being simply below the text, this property allows for more fine-grained positioning.

This is achieved using the text-underline-position property.
Let's take a look at a live demo to see how it works.

CSS Live Demo: text-underline-position Click the demo button below!

By default, the underline appears where browsers typically draw it—this is usually based on the auto value, which is the initial value of text-underline-position.

However, you can override this behavior by specifying a different value for the text-underline-position property.

Values

Accepted values for the text-underline-position property
auto The browser chooses the underline position based on its default behavior, typically aligned with or slightly below the alphabetic baseline.
from-font Uses the preferred underline position specified by the font, if available. If not defined in the font, it falls back to the browser default.
under Positions the underline at the lower edge of the text content—specifically, below the bottom edge of letters that extend beneath the baseline, such as g, j, p, q, and j.
left In vertical writing modes, the underline is positioned on the left side of the text, using the same baseline offset as under.
In horizontal writing modes, it behaves the same as auto
right In vertical writing modes, the underline is positioned on the right side of the text, using the same baseline offset as under.
In horizontal writing modes, it behaves the same as auto.

Basic Usage

CSS 
.underline-under {
    text-decoration: underline;
    text-underline-position: under;
}

For more details and examples, see CSS text-underline-position Property – Specifying the Positional Basis of Underlines.

text-underline-offset – Adjusting the Spacing Relative to the Underline's Positional Basis

The text-underline-offset property defines the spacing (offset) from the baseline established by text-underline-position, allowing you to increase or decrease the distance for fine-tuned adjustment.

By using this property, you can increase or decrease the spacing from the underline's positional basis.
Let's take a look at a live demo to see how it works.

CSS Live Demo: text-underline-offset Click the demo button below!

If the value is positive, the underline is offset outward from its original position. If negative, the underline is offset inward.

Basic Usage

CSS 
.underline-offset {
    text-decoration: underline;
    text-underline-offset: 5px;
}

For more details and examples, see CSS text-underline-offset Property – Adjusting Underline Offset.

Using Both Properties Together for More Precise Control

The text-underline-position and text-underline-offset properties can be used independently, but together they enable much finer control over underline styling.

For example, you can prevent the underline from overlapping descenders—letters like g, j, p, q, and y—by setting text-underline-position: under, then finely adjust the spacing with text-underline-offset: 2px to achieve optimal readability and visual balance.

Let's see this in action with the following example:

HTML 
<h4>Regular Underline</h4>
<p>ABC ghij 1234</p>

<h4>Underline with Precise Position and Spacing</h4>
<p class="custom-underline">ABC ghij 1234</p>
CSS 
p {
    text-decoration: underline;
}
.custom-underline{
    text-underline-position: under;
    text-underline-offset: 2px;
}
Rendered Output

Understanding and applying these two properties lets you create more refined and functional underlines in your web pages.

Browser compatibility

Browser Compatibility for text-underline-position and text-underline-offset Properties
Property
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
text-underline-position 33 12 74 12.1
text-underline-offset 87 87 70 12.1

References

See also