w3docs logo

CSS text-underline-position Property

The text-underline-position property specifies the position of the underline on the element with the text-decoration "underline" value specified.

The text-underline-position is only partially supported by Chrome .

For maximum browser compatibility, extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions) are used with this property.
Initial Value auto
Applies to All elements.
Inherited Yes.
Animatable No.
Version CSS3
DOM Syntax object.style.textunderlinePosition = "under";

Syntax

text-underline-position: auto | under | left | right | above | below | auto-pos | initial | inherit;

Example of the text-underline-position property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration: underline;
        -webkit-text-underline-position: auto;
        -ms-text-underline-position: auto;
        text-underline-position: auto;
      }
    </style>
  </head>
  <body>
    <h2>Text underline-position property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>

Result

CSS text-underline-position under value

Example of the text-underline-position property with the "under" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration: underline;
        -webkit-text-underline-position: under;
        -ms-text-underline-position: under;
        text-underline-position: under;
        text-decoration-color: #1c87c9;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Text underline-position property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>

Values

Value Description
auto The browser uses its own algorithm to place the line at or under the alphabetic baseline.
under Forces the underline to be placed under the element's text content.
left Forces the element to be placed on the left side of the text in the vertical writing-mode.
right Forces the element to be placed on the right side of the text in the vertical writing-mode.
above Forces the line to be above the text.
below Forces the line to be below the text.
auto-pos Works the same as auto value.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

chrome edge firefox safari opera
33.0+ 12.0+ x x x

Practice Your Knowledge

Which statement is incorrect about text-underline-position property?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?