CSS text-decoration-color property

The CSS text-decoration-color property is used to specify the color to be applied for the text-decoration of an HYML element.

CSS text-decoration-color property

text-decoration-color

The text-decoration-color property is used to specify the color for the text-decoration.

Syntax

text-decoration-color:color|inherit|initial

This is an example of text-decoration-color property

Example

<!DOCTYPE html>
<html>
<head>
    <title>CSS text decoration color</title>
    <style>
        .ms-green{
            text-decoration-line: overline;
            text-decoration-color: green;
        }
        .ms-purple{
            text-decoration-line: line-through;
            text-decoration-color: purple;
        }
        .ms-orange{
            text-decoration-line: underline;
            text-decoration-color: orange;
        }
    </style>
</head>
<body>
    <p class="ms-green">I have green colored overline</p>
    <p class="ms-purple">Look at my color too</p>
    <p class="ms-orange">And I have an orange colored underline</p>
</body>
</html>

Output

I have green colored overline

Look at my color too

And I have an orange colored underline

You can also use the shorthand text-decoration property instead.


Share Tweet Send
Loading...
You've successfully subscribed to Geekinsta
Great! Next, complete checkout for full access to Geekinsta
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.