CSS text-underline-position

The CSS text-underline-position property specifies the position of the underline text decoration line that is set using the text-decoration property.

The text-underline-position property can take the following values:

  1. auto: The underline is drawn at the default position based on the font metrics.
  2. under: The underline is drawn at the normal position below the text.
  3. left: The underline is drawn at the left position below the text.
  4. right: The underline is drawn at the right position below the text.

Let's see some examples:

Result: 

    
Auto underline position

    
Under underline position

    
Left underline position

    
Right underline position

In the above example, we have applied the text-decoration: underline; style to create underlines for each text, and then used the text-underline-position property to set the position of the underline for each text.