CSS text-decoration-line

CSS text-decoration-line Property

CSS text-decoration-line property sets the type of decoration to use for text in HTML Element(s).

The syntax to specify a value for text-decoration-line property is

text-decoration-line: value;

The following table gives the possible values that could be given to text-decoration-line property.

Value	Description	Examples
none	No decoration. Default value.	text-decoration-line: none;
underline	Display a line under the text.	text-decoration-line: underline;
overline	Display a line over the text.	text-decoration-line: overline;
line-through	Display a line through the text.	text-decoration-line: line-through;
initial	Sets text-decoration-line to default value.	text-decoration-line: initial;
inherit	Inherits text-decoration-line value from its parent element.	text-decoration-line: inherit;

Examples

In the following examples, we decorate the text using text-decoration-line property.

Underline

In the following example, we decorate the text with an underline, using text-decoration-line property.

Example

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            font-size: 50px;
            text-decoration-line: underline;
        }
    </style>
</head>
<body>
    <p id="p1">Hello World.</p>
</body>
</html>

Overline

In the following example, we decorate the text with an over line, using text-decoration-line property.

Example

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            font-size: 50px;
            text-decoration-line: overline;
        }
    </style>
</head>
<body>
    <p id="p1">Hello World.</p>
</body>
</html>

Line-through

In the following example, we decorate the text with a line through the text, using text-decoration-line property.

Example

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            font-size: 50px;
            text-decoration-line: line-through;
        }
    </style>
</head>
<body>
    <p id="p1">Hello World.</p>
</body>
</html>

Multiple Text Decoration Line Values

We can also set text-decoration-line property with multiple values in a single assignment.

In the following example, we have set text-decoration-line property with both underline and line-through, as shown in the following example.

Example

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #p1 {
            font-size: 50px;
            text-decoration-line: underline line-through;
        }
    </style>
</head>
<body>
    <p id="p1">Hello World.</p>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about text-decoration-line property, and how to use this property for HTML Elements, with examples.

TutorialKart

CSS text-decoration-line