You are here: Reference > CSS > properties > text-underline-position

text-underline-position property

Browser support:
Specifies the position of the underline decoration.
This property offers a refinement for underlined text content.
For a cross-browser solution, use text-decoration property to change whether the element is underlined or overlined.
The text-underline-position property has effect only if the value of the text-decoration property is set to 'underline'.
JavaScript page for this property: textUnderlinePosition. You can find other example(s) there.

Possible values:

 One of the following values: 
above
Underline is above the text.
auto
Underline is below the text, or above if lang attribute is set to 'ja' (japanese) and writing-mode property is set to 'tb-rl'.
auto-pos
Same as auto. IE6 and later.
below
Underline is below the text.
Default: auto.

Example HTML code 1:

This example illustrates the use of the text-underline-position property:
<head>
    <style>
        .example {
            text-decoration: underline;
            text-underline-position: above;
        }
    </style>
</head>
<body>
    <p id="sample" class="example">text underline position</p>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content