text-decoration-thickness
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.
CSS
text-decoration-thickness: value;
JS
object.style.textDecorationThickness = "value";
Values
<'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 (%).
Initial
auto
from-font
<!doctype html>
<html>
<head>
<style>
p {
font-size: 50px;
text-decoration-line: underline;
text-decoration-thickness: from-font;
}
</style>
</head>
<body>
<p>from-font</p>
</body>
</html>
length
<!doctype html>
<html>
<head>
<style>
p {
font-size: 50px;
text-decoration-line: underline;
text-decoration-thickness: 10px;
}
</style>
</head>
<body>
<p>length</p>
</body>
</html>
percentage
<!doctype html>
<html>
<head>
<style>
p {
font-size: 50px;
text-decoration-line: underline;
text-decoration-thickness: 10%;
}
</style>
</head>
<body>
<p>percentage</p>
</body>
</html>
JS
<!doctype html>
<html>
<head>
<style>
p {
font-size: 50px;
text-decoration-line: underline;
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("p")[0].style.textDecorationThickness = value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="auto">
<input onmouseover="mouseover(value)" type="button" value="from-font">
<button onmouseover="mouseover(value)" value="10px">length</button>
<button onmouseover="mouseover(value)" value="10%">percentage</button>
<p>text-decoration-thickness</p>
</body>
</html>
Internal
External