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:

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!