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.
text-underline-position: value; object.style.textUnderlinePosition = "value"; <'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.
<!doctype html>
<html>
<head>
<style>
p
{
font-size: 32px;
text-decoration-line: underline;
text-underline-position: from-font;
}
p:nth-of-type(2)
{
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>from-font</p>
<p>from-font</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
font-size: 32px;
text-decoration-line: underline;
text-underline-position: under;
}
p:nth-of-type(2)
{
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>under</p>
<p>under</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
font-size: 32px;
text-decoration-line: underline;
text-underline-position: left;
}
p:nth-of-type(2)
{
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>left</p>
<p>left</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
font-size: 32px;
text-decoration-line: underline;
text-underline-position: right;
}
p:nth-of-type(2)
{
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<p>right</p>
<p>right</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
font-size: 32px;
text-decoration-line: underline;
}
p:nth-of-type(2)
{
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">auto</button>
<button onmouseover="myfunction(innerHTML)">from-font</button>
<button onmouseover="myfunction(innerHTML)">under</button>
<button onmouseover="myfunction(innerHTML)">left</button>
<button onmouseover="myfunction(innerHTML)">right</button>
<p>text-underline-position</p>
<p>text-underline-position</p>
<script>
function myfunction(myparameter)
{
const myelements = document.querySelectorAll("p");
for(let myelement of myelements)
{
myelement.style.textUnderlinePosition = myparameter;
}
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
font-size: 32px;
text-decoration-line: underline;
}
p:nth-of-type(2)
{
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<button>initial</button>
<button>auto</button>
<button>from-font</button>
<button>under</button>
<button>left</button>
<button>right</button>
<p>text-underline-position</p>
<p>text-underline-position</p>
<script>
function myfunction(myparameter)
{
const myelements = document.querySelectorAll("p");
for(let myelement of myelements)
{
myelement.style.textUnderlinePosition = myparameter;
}
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
myelement.addEventListener("mouseover", function(){myfunction(myelement.innerHTML)});
}
</script>
</body>
</html>