Open In App

CSS text-underline-position Property

Improve
Improve
Like Article
Like
Save
Share
Report

The CSS text-underline-position is a property that determines the position of the underline that appears below the text. This property is used to control the spacing between the text and the underline, and can be used to customize the appearance of underlined text.

Syntax: The following is the syntax for the text-underline-position property:

text-underline-position: auto|under|left|right;

Before using the text-underline-position property, you have to apply the text-decoration: underline property to apply the underline below the text. After that, you can change the position of the underline using the text-underline-position property.

 

Syntax: 

text-decoration:underline;

Property values:

  • auto: This is the default value, and it means that the browser will automatically determine the position of the underline based on the font metrics.
  • under: This sets the underline below the text without cutting any of the characters.
  • left: This value can be used in the case of text written vertically. This sets the position of the underlined left side of the text written vertically.
  • right: This sets the position of underlined right side of the text written vertically.
  • from-font: Use this value if the font file contains position information. If the font file does not contain this information, the browser chooses the appropriate position and behaves as if it were set automatically.

Example 1: In this example, we will use the text-underline-position: auto and text-underline-position: under properties and will try to understand the differences between both properties.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>
        CSS text-underline-position Property
    </title>
  
    <style>
        p {
            width: 20rem;
        }
  
        .first {
            text-decoration: underline;
            text-underline-position: auto;
        }
  
        .second {
            text-decoration: underline;
            text-underline-position: under;
        }
    </style>
</head>
  
<body>
  
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
  
    <h3>text-underline-position:auto;</h3>
  
    <p class="first">
        A Computer Science portal for geeks. It 
        contains well written, well thought and
        well explained computer science and
        programming articles.
    </p>
  
    <h3>text-underline-position: under;</h3>
      
    <p class="second">
        We provide a variety of services for 
        you to learn, thrive and also have fun!
    </p>
</body>
  
</html>


Output:

 

Example 2: In this example, we have used CSS writing-mode: vertical-rl property which allows you to write the text in the vertical direction. 

Syntax: 

writing-mode: vertical-rl;

Here, we will apply underline-position: left and underline-position: right to understand their behaviors. The underline-position: left property sets the underlined left side of the paragraph’s text and the underline-position: rights sets the position of the underlined right side of the text.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>
        CSS text-underline-position Property
    </title>
  
    <style>
        p {
            height: 20rem;
            padding: 1rem;
        }
  
        div {
            display: flex;
        }
  
        .first {
            text-decoration: underline;
            writing-mode: vertical-lr;
            text-underline-position: left;
            background-color: rgba(95, 158, 160, 0.602);
        }
  
        .second {
            text-decoration: underline;
            writing-mode: vertical-lr;
            text-underline-position: right;
            background-color: rgba(255, 127, 80, 0.49);
        }
    </style>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
  
    <div>
        <h3>
            text-underline-position:auto;
        </h3>
        <p class="first">
            A Computer Science portal for geeks.
            It contains well written, well thought
            and well explained computer science
            and programming articles
        </p>
          
        <h3>
            text-underline-position: under;
        </h3>
        <p class="second">We provide a variety of
            services for you to learn,
            thrive and also have fun!
        </p>
    </div>
</body>
  
</html>


Output:

 

Supported Browsers:

  • Chrome 33
  • Edge 12
  • Firefox 74
  • Opera 20
  • Safari 12.1


Last Updated : 22 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads