CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



text-decoration-color

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML (Hypertext Markup Language). CSS is used to style web pages and applications, and it provides a wide range of properties to customize the appearance of text and other elements. One of these properties is text-decoration-color, which is used to set the color of the line drawn through text when the text-decoration property is set to line-through, underline, or overline.

Brief Explanation of Text-Decoration-Color

The text-decoration-color property is used to set the color of the line drawn through text when the text-decoration property is set to line-through, underline, or overline. This property is used to customize the appearance of text and make it more visually appealing. The text-decoration-color property can be used in combination with other text-decoration properties such as text-decoration-line and text-decoration-style to create different effects.

The text-decoration-color property can be set to any valid CSS color value, including named colors, hexadecimal values, RGB values, and HSL values. The default value of text-decoration-color is the currentColor value, which means that the color of the line drawn through text is the same as the color of the text itself.

Code Examples

Here are some examples of how to use the text-decoration-color property in CSS:

Example 1:

In this example, we set the text-decoration-color property to red:


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

This will draw a red line through the text in the paragraph.

Example 2:

In this example, we set the text-decoration-color property to a hexadecimal value:


p {
  text-decoration: underline;
  text-decoration-color: #00FF00;
}

This will draw a green underline below the text in the paragraph.

Example 3:

In this example, we set the text-decoration-color property to an RGB value:


p {
  text-decoration: overline;
  text-decoration-color: rgb(255, 0, 0);
}

This will draw a red line above the text in the paragraph.

Example 4:

In this example, we set the text-decoration-color property to an HSL value:


p {
  text-decoration: line-through;
  text-decoration-color: hsl(120, 100%, 50%);
}

This will draw a green line through the text in the paragraph.

Conclusion

The text-decoration-color property is a useful CSS property that can be used to customize the appearance of text and make it more visually appealing. It can be used in combination with other text-decoration properties to create different effects. By using the text-decoration-color property, web developers can create more visually appealing web pages and applications.

References

Activity