In this article, we will discuss the text-decoration-thickness property in CSS.
This property sets the width of the stroke of the decorated line below, above, or through the text. The different values that this option can take are as follows:
- auto: The thickness of the text-decoration line depends on the browser.
- font-file: Some font files include the values for preferred thickness, then the value from the font file is applied, else auto is applied.
-
custom values: If the developer wants a custom thickness of the text-decoration, then the value can be provided in the following two formats:
- length: Overriding the thickness applied automatically, the thickness can be applied by using values in units of px, rem, em, pt, etc.
- percentage: Overriding the thickness applied automatically, the thickness can be applied by using percentage values of 1em of the current font. If the whole page has different font sizes, the thickness would be the same as it scales with the font size and independent of actual size.
-
global values: These values are globally set and used frequently.
- initial: It’s the way to say that reset to default which may be auto or font-file, whichever suits.
- inherit: This value gets the value of line thickness from its next parent.
- unset: This value works as two cases, if the text-decoration-thickness has some inherited value, it will be used, else the initial value will be used.
Syntax:
text-decoration-thickness: auto | font-file | length | percentage | global values;
In the following examples, we have 4 different paragraphs with different classes of auto, font-file, length, percentage. For each of the classes, we have provided the different values and the style is applied accordingly.
Example 1: This example demonstrates the use of text-decoration-thickness with the value of the auto.
<!DOCTYPE html><html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.auto {
text-decoration-thickness: auto;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:auto
</p>
<p class="auto">
A computer science portal for geeks.
</p>
</body>
</html>
|
Output:
Example 2: This example demonstrates the use of the text-decoration-thickness property with the value of the auto. In this case, the output is the same since the auto sets the font-file values and so it becomes the default.
<!DOCTYPE html><html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.font-file {
text-decoration-thickness: font-file;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:font-file
</p>
<p class="font-file">
A computer science portal for geeks.
</p>
</body>
</html>
|
Output:
Example 3: This example demonstrates the text-decoration-thickness property set with a defined length of 3px.
<!DOCTYPE html><html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.length {
text-decoration-thickness: 3px;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:length
</p>
<p class="length">
A computer science portal for geeks.
</p>
</body>
</html>
|
Output:
Example 4: This example demonstrates the text-decoration-thickness property set with a defined percentage of 12%.
<!DOCTYPE html><html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.percentage {
text-decoration-thickness: 12%;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:percentage
</p>
<p class="percentage">
A computer science portal for geeks.
</p>
</body>
</html>
|
Output:
Example 5: This example demonstrates the text-decoration-thickness property set with the initial value. It is used to set an element’s CSS property to its default value. It is the same as none property.
<!DOCTYPE html><html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.initial {
text-decoration-thickness: initial;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:initial
</p>
<p class="initial">
A computer science portal for geeks.
</p>
</body>
</html>
|
Output:
Example 6: This example demonstrates the text-decoration-thickness property set with the inherit value.
<!DOCTYPE html><html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.inherit {
text-decoration-thickness: inherit;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:inherit
</p>
<p class="inherit">
A computer science portal for geeks.
</p>
</body>
</html>
|
Output:
Example 7: This example demonstrates the text-decoration-thickness property set with the unset value.
<!DOCTYPE html><html>
<head>
<title>text-underline-offset property in CSS</title>
<style>
.unset {
text-decoration-thickness: unset;
text-decoration-line: solid;
text-decoration-line: underline;
text-decoration-color: green;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<p style="text-align:center;">
text-decoration-thickness:unset
</p>
<p class="unset">
A computer science portal for geeks.
</p>
</body>
</html>
|
Output:
Supported Browsers: Browsers supporting text-decoration-thickness property are listed below.
- Google Chrome 89
- Microsoft Edge 89
- Mozilla Firefox 70
- Opera 75
- Safari 12.1