The text-decoration-trim CSS property adjusts the start and end points of line decorations, allowing the author to shorten, lengthen, or shift the decoration with respect to the text.
It controls all text decoration lines drawn by this decorating box, but not any text decoration lines drawn by its ancestors. If two component values are given, the first applies to the start and the second to the end.
text-decoration-trim: value; object.style.textDecorationTrim = "value"; <'text-decoration-trim'> = <length>{1,2} | auto <length> Specifies the length using a number followed by a unit of measurement.
auto Automatically specified by the user agent.
<!doctype html>
<html>
<head>
<style>
p
{
font-size: 32px;
text-decoration-line: underline;
text-decoration-trim: 20px 10px;
}
</style>
</head>
<body>
<p>length</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
font-size: 32px;
text-decoration-line: underline;
}
</style>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">auto</button>
<button onmouseover="myfunction(value)" value="20px 10px">length</button>
<p>text-decoration-trim</p>
<script>
function myfunction(myparameter)
{
document.querySelector("p").style.textDecorationTrim = myparameter;
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
font-size: 32px;
text-decoration-line: underline;
}
</style>
</head>
<body>
<button>initial</button>
<button>auto</button>
<button value="20px 10px">length</button>
<p>text-decoration-trim</p>
<script>
function myfunction(myparameter)
{
document.querySelector("p").style.textDecorationTrim = myparameter;
}
for(const myelement of document.querySelectorAll("button"))
{
const myargument = myelement.value || myelement.innerHTML;
myelement.addEventListener("mouseover", ()=>{myfunction(myargument)});
}
</script>
</body>
</html>