W3docs
en
Log in

CSS text-underline-position Property

Use the text-underline-position CSS property to specify the position of an underline for the element. See property values and try examples.

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 property is widely supported in all modern browsers.

Initial Valueauto
Applies toAll elements.
InheritedYes.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.textUnderlinePosition = "under";

Note: In JavaScript, CSS properties with hyphens are converted to camelCase (e.g., text-underline-position becomes textUnderlinePosition).

Syntax

CSS text-underline-position values

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

Example of the text-underline-position property:

CSS text-underline-position code example

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

Result

CSS text-underline-position under value

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

CSS text-underline-position under value example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration: underline;
        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>
Try it Yourself »

Values

ValueDescription
autoThe browser uses its own algorithm to place the line at or under the alphabetic baseline.
underForces the underline to be placed under the element's text content.
leftForces the underline to be placed on the left side of the text in the vertical writing-mode.
rightForces the underline to be placed on the right side of the text in the vertical writing-mode.
aboveForces the line to be above the text.
belowForces the line to be below the text.
initialMakes the property use its default value.
inheritInherits the property from its parents element.

Practice

Practice

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