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

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


Practice Your Knowledge

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




Related articles