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.

Thetext-underline-position is only partially supported by Chrome and Internet Explorer 6+.

For maximum browser compatibility, extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer 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

<!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>

Another example where the underline position is defined as "under":

Example

<!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 is 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.




Related articles