The text-decoration-thickness CSS property sets the stroke thickness of underlines, overlines, and line-throughs specified on the element with text-decoration-line, and affects all decorations originating from this element even if descendant boxes specify a different thickness.
text-decoration-thickness: value; object.style.textDecorationThickness = "value"; <'text-decoration-thickness'> = auto | from-font | <length> | <percentage> auto Automatically specified by the user agent.
from-font If the first available font has metrics indicating a preferred underline width, use that width, otherwise behaves as auto.
<length> Specifies the length using a number followed by a unit of measurement.
<percentage> Specifies the percentage using a number followed by a percent sign (%).
<!doctype html>
<html>
<head>
<style>
p
{
font-size: 32px;
text-decoration-line: underline;
text-decoration-thickness: from-font;
}
</style>
</head>
<body>
<p>from-font</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
font-size: 32px;
text-decoration-line: underline;
text-decoration-thickness: 20px;
}
</style>
</head>
<body>
<p>length</p>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
p
{
font-size: 32px;
text-decoration-line: underline;
text-decoration-thickness: 20%;
}
</style>
</head>
<body>
<p>percentage</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(innerHTML)">from-font</button>
<button onmouseover="myfunction(value)" value="20px">length</button>
<button onmouseover="myfunction(value)" value="20%">percentage</button>
<p>text-decoration-thickness</p>
<script>
function myfunction(myparameter)
{
document.querySelector("p").style.textDecorationThickness = 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>from-font</button>
<button value="20px">length</button>
<button value="20%">percentage</button>
<p>text-decoration-thickness</p>
<script>
function myfunction(myparameter)
{
document.querySelector("p").style.textDecorationThickness = myparameter;
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
let myargument = myelement.innerHTML;
if(myelement.value)
{
myargument = myelement.value;
}
myelement.addEventListener("mouseover", function(){myfunction(myargument)});
}
</script>
</body>
</html>