CSS text-underline-position

The CSS text-underline-position property is used to define the position of text-decoration-line (line used to decorate the text). For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{text-decoration-line: underline;
        text-underline-position: under;}
   </style>
</head>
<body>
   
   <h2>The text-underline-position Property</h2>
   <p>This is an example of text-underline-position property in CSS</p>
   
</body>
</html>

Output

The text-underline-position Property

This is an example of text-underline-position property in CSS

After removing the following CSS code, from above example:

text-underline-position: under;

The output of the underlined paragraph would be:

This is an example of text-underline-position property in CSS

CSS text-underline-position Example

The syntax of text-underline-position property in CSS, is:

text-underline-position: x;

The value of x should be any of the following:

under - used to position the line in a way to not cross any descenders. That is, this keyword is used when we need to force the line to position, below the baseline
auto - used to allow browser to define the position. This is the default value
initial - used to use the default value
inherit - used to use the value inherited by the parent element

The text-underline-position: under; is used most of the time to ensure complete viewing of the text.

CSS Online Test

« Previous Tutorial Next Tutorial »