Text-decoration-color Property in CSS3

How to specify the color of the text decoration in CSS3?

By using text-decoration-color property we can specify the color of the text decoration.

<style>
        .class1 {
            text-decoration: overline;
            -moz-text-decoration-color: green; /*For Firefox/
            text-decoration-color: green;
        }

        .class2 {
            text-decoration: line-through;
            -moz-text-decoration-color: red; /For Firefox*/
            text-decoration-color: red;
        }

        .class3 {
            text-decoration: underline;
            -moz-text-decoration-color: blue; /For Firefox*/
            text-decoration-color: blue;
        }
</style>

<body>
    <h3 class="class1">www.techfunda.com</h3>
    <h3 class="class2">www.techfunda.com</h3>
    <h3 class="class3">www.techfunda.com</h3>
</body>

In the above code snippet we have given text-decoration-color property to the .class selector. So that the .class selector applies the given property to the <h3> elements. The text-decorationproperty with value "overline" & the text-decoration-color property with value "green" gives the green color line over the text of the <h3> element, the text-decoration property with value "line-through" & the text-decoration-color property with value "red" gives the red color line through the text of the <h3> element, the text-decoration property with value "undererline" & the text-decoration-color property with value "orange" gives the orange color line under the text of the <h3> element.

OUTPUT

Views: 4210 | Post Order: 93

CSS3 > Texts

Text-decoration-color Property in CSS3

How to specify the color of the text decoration in CSS3?

Related Posts

Utility Tools