CSS text-underline-position Property

❮ Previous Reference Next ❯

Example

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;
}





Hello World!

Meaning:

The text-underline-position CSS property specifies the position of the underline which is set using the text-decoration property's underline value.

Default value:auto
Inherited:Yes
Animatable:No
Version:CSS3
JavaScript syntax:
object.style.textUnderlinePosition="auto|from-font|left|right|above|below|auto-pos|initial|inherit|revert|revert-layer|unset";



Standard Syntax

text-underline-position: auto|from-font|left|right|above|below|auto-pos|initial|inherit|revert|revert-layer|unset;



Browser Support




Status







Property Values

The following table describes the values of this property:

Value Description
auto The user agent uses its own algorithm to place the line at or under the alphabetic baseline.
from-font If the font file includes information about a preferred position, use that value. If the font file doesn't include this information, behave as if auto was set, with the browser choosing an appropriate position.
under Forces the line to be set below the alphabetic baseline, at a position where it won't cross any descenders. This is useful for ensuring legibility with chemical and mathematical formulas, which make a large use of subscripts.
left In vertical writing-modes, this keyword forces the line to be placed on the left side of the text. In horizontal writing-modes, it is a synonym of under.
right In vertical writing-modes, this keyword forces the line to be placed on the right side of the text. In horizontal writing-modes, it is a synonym of under.
above Non-standard. Forces the line to be above the text. When used with East-Asian text, using the auto keyword will lead to a similar effect.
below Non-standard. Forces the line to be below the text. When used with alphabetic text, using the auto keyword will lead to a similar effect.
auto-pos Non-standard. Experimental. A synonym of auto, which should be used instead.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.



Default CSS Property Values

selectors {
  text-underline-position: auto;
}
❮ Previous Reference Next ❯