The text-decoration property is used to add decorative effects to text. It is a shorthand property that allows you to set the following individual properties:
text-decoration-line: specifies the type of decoration to be used (e.g. underline, overline, line-through, etc.)text-decoration-color: specifies the color of the decorationtext-decoration-style: specifies the style of the decoration (e.g. solid, dotted, dashed, double, etc.)text-decoration-thickness: specifies the thickness of the decorationThe text-decoration property can be applied to any text element, including headings, paragraphs, links, and spans. It is commonly used to add emphasis to text or to indicate a link.
Here are some examples of how to use the text-decoration property:
To underline text, use the text-decoration-line property with a value of underline:
<p style="text-decoration-line: underline;">This text is underlined.</p>
This text is underlined.
To add an overline to text, use the text-decoration-line property with a value of overline:
<p style="text-decoration-line: overline;">This text has an overline.</p>
This text has an overline.
To add a line-through effect to text, use the text-decoration-line property with a value of line-through:
<p style="text-decoration-line: line-through;">This text has a line-through effect.</p>
This text has a line-through effect.
You can also specify the color of the text decoration using the text-decoration-color property:
<p style="text-decoration-line: underline; text-decoration-color: red;">This text is underlined and red.</p>
This text is underlined and red.
The text-decoration-style property allows you to specify the style of the text decoration. Here are some examples:
<p style="text-decoration-line: underline; text-decoration-style: dotted;">This text is underlined with a dotted line.</p>
<p style="text-decoration-line: underline; text-decoration-style: dashed;">This text is underlined with a dashed line.</p>
<p style="text-decoration-line: underline; text-decoration-style: double;">This text is underlined with a double line.</p>
This text is underlined with a dotted line.
This text is underlined with a dashed line.
This text is underlined with a double line.
The text-decoration-thickness property allows you to specify the thickness of the text decoration. Here are some examples:
<p style="text-decoration-line: underline; text-decoration-thickness: 1px;">This text is underlined with a 1px thick line.</p>
<p style="text-decoration-line: underline; text-decoration-thickness: 2px;">This text is underlined with a 2px thick line.</p>
<p style="text-decoration-line: underline; text-decoration-thickness: 3px;">This text is underlined with a 3px thick line.</p>
This text is underlined with a 1px thick line.
This text is underlined with a 2px thick line.
This text is underlined with a 3px thick line.
The text-decoration property is a versatile way to add decorative effects to text. By using the individual properties that make up the shorthand property, you can customize the type, color, style, and thickness of the text decoration to suit your needs.