Web development and Tech news Blog site. WEBISFREE.com

HOME > css

CSS Property text-decoration

Last Modified : 24 Feb, 2023 / Created : 24 Feb, 2023
504
View Count
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:
a[href] {
  text-decoration: underline red 2px;
}

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:
a{href] {
  text-decoration: underline overline 1px;
}

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.
<span style="text-decoration: underline">text-decoration: underline</span>
<span style="text-decoration: overline">text-decoration: overline</span>
<span style="text-decoration: line-through">text-decoration: line-through</span>


<span style="text-decoration: underline">text-decoration: underline</span><br/>
<span style="text-decoration: overline">text-decoration: overline</span><br/>
<span style="text-decoration: line-through">text-decoration: line-through</span>


Below are examples of using text-decoration-line with overlapping values or wavy effect.
<span style="text-decoration: underline wavy">text-decoration: underline wavy</span>
<span style="text-decoration: line-through underline">text-decoration: line-through underline</span>
<span style="text-decoration: underline overline line-through">text-decoration: underline overline line-through</span>


<span style="text-decoration: underline wavy">text-decoration: underline wavy</span><br/>
<span style="text-decoration: line-through underline">text-decoration: line-through underline</span><br/>
<span style="text-decoration: underline overline line-through ">text-decoration: underline overline line-through </span>


Next, here's an example of using text-decoration-color to set the color:
<span style="text-decoration: underline red">text-decoration-line: underline red</span>
<span style="text-decoration: underline blue">text-decoration-line: underline blue</span>
<span style="text-decoration: underline green">text-decoration-line: underline green</span>
<span style="text-decoration: underline violet">text-decoration-line: underline violet</span>


<span style="text-decoration: underline red">text-decoration-line: underline red</span><br/>
<span style="text-decoration: underline blue">text-decoration-line: underline blue</span><br/>
<span style="text-decoration: underline green">text-decoration-line: underline green</span><br/>
<span style="text-decoration: underline violet">text-decoration-line: underline violet</span>


Below is an example of changing the thickness using text-decoration-thickness.
<span style="text-decoration: underline">text-decoration-line: underline</span>
<span style="text-decoration: underline 1px">text-decoration-line: underline 1px</span>
<span style="text-decoration: underline 3px">text-decoration-line: underline 3px</span>
<span style="text-decoration: underline 5px">text-decoration-line: underline 5px</span>


<span style="text-decoration: underline">text-decoration-line: underline</span><br />
<span style="text-decoration: underline 1px">text-decoration-line: underline 1px</span><br />
<span style="text-decoration: underline 3px">text-decoration-line: underline 3px</span><br />
<span style="text-decoration: underline 5px">text-decoration-line: underline 5px</span><br />


ere is an example where text-decoration-thickness is set using from-font, which automatically determines the thickness based on the font size.
<span style="font-size: 10px; text-decoration: underline from-font;">font-size: 10px; text-decoration-line: underline from-font;</span>
<span style="font-size: 20px; text-decoration: underline from-font;">font-size: 20px; text-decoration-line: underline from-font;</span>
<span style="font-size: 30px; text-decoration: underline from-font;">font-size: 30px; text-decoration-line: underline from-font;</span>


<span style="font-size: 10px; text-decoration: underline from-font;">font-size: 10px; text-decoration-line: underline from-font;</span><br />
<span style="font-size: 30px; text-decoration: underline from-font;">font-size: 30px; text-decoration-line: underline from-font;</span><br />
<span style="font-size: 50px; text-decoration: underline from-font;">font-size: 50px; text-decoration-line: underline from-font;</span><br />


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.
Perhaps you're looking for the following text as well?

Previous

Understanding the CSS style property text-underline-offset

Previous

[CSS] Learn the CSS property clip-path. Circles, ellipses, polygons