text-underline-position

The text-underline-position CSS property sets the position of an underline with respect to the text, and defines its zero position for further adjustment by text-underline-offset.

Syntax

CSS

text-underline-position: value;

JS

object.style.textUnderlinePosition = "value";

Values

<'text-underline-position'> = auto | [ from-font | under ] || [ left | right ]

auto

Automatically specified by the user agent.

from-font

If the first available font has metrics indicating a preferred underline offset, use that offset, otherwise behaves as auto.

under

The underline is positioned under the element's text content.

left

In vertical typographic modes, the underline is aligned as for under, except it is always aligned to the left edge of the text.

right

In vertical typographic modes, the underline is aligned as for under, except it is always aligned to the right edge of the text.

Initial

auto

<!doctype html>
<html>
<head>
    <style>
        p {
            text-decoration: underline;
        }
    </style>
    <script>
        function mouseover(value) {
            var element = document.getElementsByTagName("p")[0];
            element.style.textUnderlineOffset = "auto";
            element.style.textUnderlinePosition = value;
            element.style.writingMode = "horizontal-tb";
            if (value == "from-font") {
                element.style.textUnderlineOffset = "100px";
            } else if (value == "left" || value == "right") {
                element.style.writingMode = "vertical-lr";
            }
        }
    </script>
</head>
<body>
    <input onmouseover="mouseover(value)" type="button" value="auto">
    <input onmouseover="mouseover(value)" type="button" value="from-font">
    <input onmouseover="mouseover(value)" type="button" value="under">
    <input onmouseover="mouseover(value)" type="button" value="left">
    <input onmouseover="mouseover(value)" type="button" value="right">
    <p>text-underline-position</p>
</body>
</html>

text-underline-position

Syntax

CSS

JS

Values

Initial

Examples

auto

from-font

under

left

right

JS

Links

Internal

External