TEXT-UNDERLINE-POSITION

The text-underline-position 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

EXAMPLES

AUTO

FROM-FONT

UNDER

LEFT

RIGHT

JS

<!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>