The text-decoration-color CSS property is used to specify the color of the decorative lines added to text using the text-decoration property. It allows you to customize the color of various text decorations, such as underlines, overlines, line-throughs, and other text effects.
The text-decoration-color property accepts any valid CSS color value. This can be a named color (e.g., red, blue), a hexadecimal value (e.g., #ff0000, #00bfff), an RGB value (e.g., rgb(255, 0, 0)), or an RGBA value (e.g., rgba(0, 0, 255, 0.5)).
Here’s an example:
.link {
text-decoration: underline;
text-decoration-color: blue;
}
In this example, the .link class sets the text-decoration property to underline to add an underline to the text. The text-decoration-color property is then set to blue, which determines the color of the underline.
It’s important to note that the text-decoration-color property only affects the color of the text decoration and does not impact the color of the text itself. If you want to change the color of the text, you should use the color property instead.
The text-decoration-color property is especially useful when you want to apply customized text decorations with specific colors. It allows you to enhance the visual appearance of links, highlight text, or create unique text effects by combining different text-decoration properties with different colors.