CSS - text-decoration-line Property

Quiz

CSS text-decoration-line property specifies the type of line the text decoration will have. More than one property value can be specified using a space-separated list of text decoration line values.

Syntax

The syntax for the CSS text-decoration-line property is as follows:

text-decoration-line: none | underline | overline | line-through | initial | inherit;

Property Values

Value	Description
none	It is the default value that represents a normal text.
underline	It specifies an underlined text.
overline	It specifies a line above the text.
line-through	It specifies a line through the text.
initial	It is used to set this property to its default value.
inherit	It is used to inherit the property of its parent element.

Examples of text-decoration-line Property

The following examples illustrate various text-decoration-line values.

Setting text-decoration-line to underline

In this example, we have set the CSS text-decoration-line property to underline.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS text-decoration-line Property</title>
    <style>
        .heading {
            color: #04af2f;
        }
        .myClass {
            text-decoration-line: underline;
        }
    </style>
</head>
<body>
    <h2 class="heading">
        CSS text-decoration-line Property
    </h2>
    <p class="myClass">
        This paragraph has underlined text.
    </p>
</body>
</html>

Set Multiple text-decoration-line Values

In this example, we have set the multiple space separated CSS text-decoration-line properties. The text-decoration-line property for paragraph is set to underline and overline.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS text-decoration-line Property</title>
    <style>
        .heading {
            color: #04af2f;
        }
        .myClass {
            text-decoration-line: underline overline;
        }
    </style>
</head>
<body>
    <h2 class="heading">
        CSS text-decoration-line Property
    </h2>
    <p class="myClass">
        This paragraph has underline and overline text.
    </p>
</body>
</html>

Setting text-decoration-line to 'line-through' and 'none'

In this example, we have set the CSS text-decoration-line property to line-through.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS text-decoration-line Property</title>
    <style>
        .heading {
            color: #04af2f;
        }
        .myClass {
            text-decoration-line: line-through;
        }
        .myClass2 {
            text-decoration-line: none;
        }
    </style>
</head>
<body>
    <h2 class="heading">
        CSS text-decoration-line Property
    </h2>
    <p class="myClass">
        This paragraph has line through text decoration.
    </p>
    <p class="myClass2">
        This paragraph has no text decoration.
    </p>
</body>
</html>

Supported Browsers

Property
text-decoration-line	57	79	36	12.1	44

Print Page