CSS text-underline-position Property

Last Updated : 17 Jun, 2024

The text-underline-position CSS property specifies the position of an underline on text. It allows control over whether the underline is placed below, above, or at a custom offset from the text. This property enhances text readability and aesthetics, especially in complex layouts.

Syntax:

The following is the syntax for the text-underline-position property:

text-underline-position: auto|under|left|right;

Before using the text-underline-position property, you have to apply the text-decoration: underline property to apply the underline below the text. After that, you can change the position of the underline using the text-underline-position property.

Syntax:

text-decoration:underline;

Property values:

Value	Description
auto	Default value, browser determines underline position based on font metrics.
under	Underline positioned below text without cutting characters.
left	Used for vertically written text, positions underline on the left side.
right	Positions underline on the right side of vertically written text.
from-font	Utilizes position information from font file if available; if not, behaves like `auto`.

Example 1: In this example, we will use the text-underline-position: auto and text-underline-position: under properties and will try to understand the differences between both properties.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        CSS text-underline-position Property
    </title>

    <style>
        p {
            width: 20rem;
        }

        .first {
            text-decoration: underline;
            text-underline-position: auto;
        }

        .second {
            text-decoration: underline;
            text-underline-position: under;
        }
    </style>
</head>

<body>

    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h3>text-underline-position:auto;</h3>

    <p class="first">
        A Computer Science portal for geeks. It
        contains well written, well thought and
        well explained computer science and
        programming articles.
    </p>

    <h3>text-underline-position: under;</h3>

    <p class="second">
        We provide a variety of services for
        you to learn, thrive and also have fun!
    </p>
</body>

</html>

Output:

Example 2: In this example, we have used CSS writing-mode: vertical-rl property which allows you to write the text in the vertical direction.

Syntax:

writing-mode: vertical-rl;

Here, we will apply underline-position: left and underline-position: right to understand their behaviors. The underline-position: left property sets the underlined left side of the paragraph's text and the underline-position: rights sets the position of the underlined right side of the text.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        CSS text-underline-position Property
    </title>

    <style>
        p {
            height: 20rem;
            padding: 1rem;
        }

        div {
            display: flex;
        }

        .first {
            text-decoration: underline;
            writing-mode: vertical-lr;
            text-underline-position: left;
            background-color: rgba(95, 158, 160, 0.602);
        }

        .second {
            text-decoration: underline;
            writing-mode: vertical-lr;
            text-underline-position: right;
            background-color: rgba(255, 127, 80, 0.49);
        }
    </style>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <div>
        <h3>
            text-underline-position:auto;
        </h3>
        <p class="first">
            A Computer Science portal for geeks.
            It contains well written, well thought
            and well explained computer science
            and programming articles
        </p>

        <h3>
            text-underline-position: under;
        </h3>
        <p class="second">We provide a variety of
            services for you to learn,
            thrive and also have fun!
        </p>
    </div>
</body>

</html>