CSS text-underline-position

The CSS text-underline-position property is used to define the position of text-decoration-line (the 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

The text-decoration-line property is set to "underline" in the first style rule. This implies that a line will be drawn beneath all text in the p element, acting as an underline.

The text-underline-position property is set to "under" by the second style rule. This details the underline's vertical position in relation to the text. In this instance, the underline will appear exactly beneath the text, which is the default setting.

The text in the paragraph will be underlined when this code is displayed in a web browser, and the underline will be placed directly beneath the text. This indicates that the line will touch the text characters at the bottom.

It should be noted that not all web browsers support the text-underline-position property, so it may occasionally not function as intended.

CSS text-underline-position example

The syntax of the 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 itself below the baseline.
auto: used to allow the 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 »

Liked this post? Share it!