Text-decoration Property in CSS3

How to specify the decoration added to text in CSS3?

By using text-decoration property we can specify the decoration added to text.

<style>
        .class1 {
            text-decoration: overline;
            border: 1px solid red;
            padding: 5px;
        }

        .class2 {
            text-decoration: line-through;
            border: 1px solid green;
            padding: 5px;
        }

        .class3 {
            text-decoration: underline;
            border: 1px solid orange;
            padding: 5px;
        }
</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 the text-decoration property to the .class selector. The text-decoration property with value "overline" gives the line over the text of the <h3> element, the text-decoration property with value line-through" gives the line through the text of the <h3> element, the text-decoration property with value "undererline" gives the line under the text of the <h3> element.

OUTPUT

Views: 3400 | Post Order: 91

CSS3 > Texts

Text-decoration Property in CSS3

How to specify the decoration added to text in CSS3?

Related Posts

Utility Tools