The text-decoration-thickness
property is used to set the thickness of the line used for text decoration. Text decoration is used to add visual emphasis to text, such as underlining or striking through text. The thickness of the line used for text decoration can be adjusted using this property.
The text-decoration-thickness
property can be used with the text-decoration-line
property to set the style of the text decoration. The text-decoration-line
property is used to set the type of text decoration, such as underline, overline, or line-through. The text-decoration-thickness
property is used to set the thickness of the line used for the text decoration.
Here are some examples of how to use the text-decoration-thickness
property:
Example 1: Set the thickness of an underline to 2px
<p style="text-decoration-line: underline; text-decoration-thickness: 2px;">This text is underlined with a 2px line</p>
Example 2: Set the thickness of a line-through to 4px
<p style="text-decoration-line: line-through; text-decoration-thickness: 4px;">This text has a line-through with a 4px line</p>
Example 3: Set the thickness of an overline to 1px
<p style="text-decoration-line: overline; text-decoration-thickness: 1px;">This text has an overline with a 1px line</p>
Example 4: Set the thickness of a dotted underline to 3px
<p style="text-decoration-line: underline; text-decoration-thickness: 3px; text-decoration-style: dotted;">This text is underlined with a dotted line that is 3px thick</p>
Example 5: Set the thickness of a double line-through to 5px
<p style="text-decoration-line: line-through; text-decoration-thickness: 5px; text-decoration-style: double;">This text has a double line-through with a 5px line</p>
As you can see from these examples, the text-decoration-thickness
property can be used to create a variety of text decorations with different line thicknesses.
The text-decoration-thickness
property is a relatively new CSS property and is not yet supported by all browsers. As of 2021, it is supported by most modern browsers, including Chrome, Firefox, Safari, and Edge. However, it is not supported by Internet Explorer.
The text-decoration-thickness
property is a useful CSS property for adjusting the thickness of text decorations such as underlines, overlines, and line-throughs. By combining this property with the text-decoration-line
and text-decoration-style
properties, a wide variety of text decorations can be created with different line styles and thicknesses.