CSS text-underline-position Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The text-underline-position property controls where the underline for text is placed vertically in relation to the glyphs and the line box. It determines whether the underline sits close to the baseline, is pushed further away to clear descenders and diacritics, or otherwise follows rules that optimize legibility for the chosen script and font. Because underlines are drawn relative to the shape and metrics of the text, this property affects how an underline interacts with tall characters, accents, and punctuation that extend below the baseline.

This property is commonly used together with the decoration system defined by text-decoration and can be fine-tuned along with text-underline-offset and text-decoration-thickness to get a consistent visual result. Where text-underline-position chooses the general placement strategy (for example prioritizing clearance of descenders), text-underline-offset can nudge the line by a fixed amount and text-decoration-thickness controls its stroke weight; line-height also plays a role because taller or shorter line boxes change the available space for underlines and can influence how much clearance is necessary.

In practice, this property matters most when precision and typographic quality are important: multi-line text where underlines must avoid crossing diacritics, inline elements with different fonts or sizes, and scripts with different vertical metrics (Latin vs. Indic vs. CJK). It also affects the visual continuity of underlines across adjacent inline elements — some placements are more likely to appear consistent when spans of different styles are joined. Designers typically use it in combination with offset and thickness adjustments to ensure underlines remain readable and visually balanced across font choices and sizes.

Finally, consider that user agents and fonts can influence exact rendering: font metrics, hinting and the browser’s default rules for particular writing modes may alter the final result. When you need precise control for branding or accessibility, test under varying fonts, sizes, and line heights, and pair the property with offset/thickness adjustments to achieve a stable, legible underline across environments.

Definition

Initial value: auto
Applies to: All elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.textUnderlinePosition

Interactive Demo

text-underline-position: auto;

text-underline-position: under;

C₈H₁₀N₄O₂ is the chemical formula for caffeine.

Syntax

text-underline-position: auto | [ under || [ left | right ] ]

Values

autoThe browser may use any algorithm to determine the underline's position; however it must be placed at or under the alphabetic baseline.
underThe underline is positioned under the element's text content. In this case the underline usually does not cross the descenders. (This is sometimes called "accounting" underline.) This value can be combined with 'left' or 'right' if a particular side is preferred in vertical writing modes.

Example

HTML

<div class='demo'>

    <h1>text-underline-position examples</h1>



    <p class='example auto'>

        <span class='label'>auto</span>

        <span class='text'>The quick brown fox jumps over the lazy dog.</span>

    </p>



    <p class='example under'>

        <span class='label'>under</span>

        <span class='text'>The quick brown fox jumps over the lazy dog.</span>

    </p>



    <p class='example left'>

        <span class='label'>left</span>

        <span class='text'>The quick brown fox jumps over the lazy dog.</span>

    </p>



    <p class='example right'>

        <span class='label'>right</span>

        <span class='text'>The quick brown fox jumps over the lazy dog.</span>

    </p>

</div>

CSS

/* Basic page */
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    padding: 32px;
    background: #f7fbff;
    color: #0b1220;
}

/* Demo layout */
.demo {
    max-width: 780px;
    margin: 0 auto;
}

/* Row */
.example {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 12px 0;
}

/* Label */
.label {
    min-width: 90px;
    font-weight: 600;
    color: #334155;
}

/* Underlined text baseline style */
.example .text {
    text-decoration-line: underline;
    text-decoration-color: #ef4444;
    text-decoration-thickness: 3px;
    font-size: 18px;
    line-height: 1.3;
}

/* Positions */
.auto .text   { text-underline-position: auto; }
.under .text  { text-underline-position: under; }
.left .text   { text-underline-position: left; }
.right .text  { text-underline-position: right; }

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS text-underline-position property. Hover over a browser icon to see the version that first introduced support for this CSS property.