CSS text-decoration-thickness

The text-decoration-thickness property in CSS allows you to control the thickness of lines used for text decoration, such as underlines, overlines, and line-throughs.

Syntax:


selector {
  text-decoration-thickness: thickness;
}

Possible values:

auto: The browser will determine the thickness of the text decoration.
from-font: Specifies that the text decoration's thickness should be based on the font size of the element.
length: Defines the thickness of the text decoration in pixels or other length units.

Examples:

Result:

This is an example of underlined text with a thickness of 2 pixels.


p {
  text-decoration: underline;
  text-decoration-color: blue;
  text-decoration-thickness: 2px;
}

Result:

This is an example of text with a line-through decoration and a thickness of 1 pixel.


p {
  text-decoration: line-through;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
}

Experiment with different values for text-decoration-thickness to achieve the desired visual effect for your text decorations.