CSS text-underline-position Property

Description

The text-underline-position CSS property is used to control the vertical positioning of underlines applied to text within an HTML element. This property allows web developers to specify whether the underline should be positioned below the text (the default behavior) or above it. By adjusting this property, designers can fine-tune the visual presentation of text and underlines to achieve various styling effects, improving readability and aesthetics in web content.

Initial value

auto

Applies to

All elements

Inherited

Yes

Computed value

As specified

Animatable

No

JavaScript syntax

object.style.textUnderlinePosition

Interactive Demo

text-underline-position: auto;

text-underline-position: under;

Syntax

text-underline-position: auto | [ under || [ left | right ] ] 

Values

• autoThe browser may use any algorithm to determine the underline's position; however it must be placed at or under the alphabetic baseline.
• underThe underline is positioned under the element's text content. In this case the underline usually does not cross the descenders. (This is sometimes called "accounting" underline.) This value can be combined with 'left' or 'right' if a particular side is preferred in vertical writing modes.

Example

<p class="horizontal">

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac

  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor

  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.

</p>



<p class="vertical">

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac

  turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor

  volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere.

</p>

p {
  font-size: 1.5rem;
  text-transform: capitalize;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.horizontal {
  text-underline-position: under;
}

.vertical {
  writing-mode: vertical-rl;
  text-underline-position: left;
}

Browser Support

The following table will show you the current browser support for the CSS text-underline-position property.

Desktop
12	33	74	20	12.1

Tablets / Mobile
33	79	20	12.2	2	4.4.3

Last updated by CSSPortal on: 2nd January 2024