CSS text-underline-position Property
Example
Set the position of underline text decorations:
div.a {
text-decoration: underline;
text-underline-position: auto;
}
div.b {
text-decoration:
underline;
text-underline-position: under;
}
Try it Yourself »
Definition and Usage
The text-underline-position property
specifies the
position of underline text decorations.
| Default value: | auto |
|---|---|
| Inherited: | yes |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.textUnderlinePosition="under" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| text-underline-position | 33.0 | 79.0 | 74.0 | 12.1 | 20.0 |
CSS Syntax
text-underline-position: auto|under|from-font|left|right|initial|inherit;
Property Values
| Value | Description | Play it |
|---|---|---|
| auto | Default value. The browser sets the position of the underline | Demo ❯ |
| under | Sets the underline below the alphabetic baseline | Demo ❯ |
| from-font | If the font file includes information about underline position, use that value. If not, use auto | |
| left | In vertical writing mode the underline will be placed to the left of the text. In horizontal writing mode the underline will be placed as auto | |
| right | In vertical writing mode the underline will be placed to the right of the text. In horizontal writing mode the underline will be placed as auto | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
CSS tutorial: CSS Text Decoration
HTML DOM reference: textDecoration property
