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.
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
from-font
<!doctype html>
<html>
<head>
<style>
p {
text-decoration: underline;
text-underline-offset: 100px;
text-underline-position: from-font;
writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<p>from-font</p>
</body>
</html>
under
<!doctype html>
<html>
<head>
<style>
p {
text-decoration: underline;
text-underline-offset: auto;
text-underline-position: under;
writing-mode: horizontal-tb;
}
</style>
</head>
<body>
<p>under</p>
</body>
</html>
left
<!doctype html>
<html>
<head>
<style>
p {
text-decoration: underline;
text-underline-offset: auto;
text-underline-position: left;
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>left</p>
</body>
</html>
right
<!doctype html>
<html>
<head>
<style>
p {
text-decoration: underline;
text-underline-offset: auto;
text-underline-position: right;
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>right</p>
</body>
</html>
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>
Internal
External