CSS Property text-decoration

The text-decoration property in CSS is a style attribute that can be used to add overline, line-through, and underline effects to text. Note that text-decoration is a subset property that can be used together with the following CSS attributes:

# CSS Property text-decoration

The text-decoration property in CSS is a style attribute that can be used to add overline, line-through, and underline effects to text. Note that text-decoration is a subset property that can be used together with the following CSS attributes:

text-decoration-line // Sets the position and style of the text lines (overline, line-through, underline, wavy, etc.).
text-decoration-color // Sets the color of the text.
text-decoration-thickness // Sets the thickness of the text (in pixels or from the font).

These properties can be declared together to create a style like this:

Let's take a closer look at each style attribute.

1. text-decoration-line attribute
The text-decoration-line attribute can be used to set multiple styles at once, such as using both underline and overline at the same time, like this:

The position of the line can be set to overline, line-through, or underline, and the style of the line can be set to wavy, blink, and more. Note that the blink style is not commonly used due to performance issues.


2. text-decoration-color attribute
The text-decoration-color attribute is used to set the color of the text. It is an optional attribute that inherits the color value from the element or its parent.


3. text-decoration-thickness attribute
Finally, the text-decoration-thickness attribute is used to set the thickness of the text. It can be set in pixels or from the font size, and it is also an optional attribute. The default value is 1px. Note that if the from-font value is used, the thickness will be relative to the inherited font size, but it will still have a default value of 1px.

! text-decoration Examples

Let's look at some various examples using the source code above.

First, here is an example of applying various text-decoration-line values.




Below are examples of using text-decoration-line with overlapping values or wavy effect.




Next, here's an example of using text-decoration-color to set the color:




Below is an example of changing the thickness using text-decoration-thickness.




ere is an example where text-decoration-thickness is set using from-font, which automatically determines the thickness based on the font size.




Here is a brief overview of using text-decoration for styling text in CSS.

! Other Notes and References

Q. Can text-decoration-thickness property be set multiple times?
; Although I tested it to apply a thicker thickness relative to the font size, it currently cannot be set multiple times.

Q. Can the position of text-decoration-line be adjusted?
; For underline, there is a text-underline-offset property that can be adjusted. However, it only works for underline and cannot be applied with negative values.