CSS text-decoration-line Property

The text-decoration-line property is used to sets various kinds of text-decoration. The text-decoration may include many values such as underline, overline, line-through, etc. It can be possible to combine more than one text-decoration property. For instance, underline and overline values can be used to display lines both under and over the text.

Syntax:

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

The text-decoration property is a shorthand property for text-decoration-line(required), text-decoration-color, and text-decoration-style.

Property Values: All the properties are described well with the example below.

none: It is the default value and used to specify no line for the text to decorate the text.

Syntax:

text-decoration-line: none;

Example: This example demonstrates the use of text-decoration-line Property whose value is set as none.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>text-decoration-line property</title>
     
    <!-- text-decoration-line property used here -->
    <style>
    h1 {
        color: green;
        text-decoration-line: none;
    }
     
    .gfg {
        text-decoration-line: none;
        font-weight: bold;
    }
    </style>
</head>
 
<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2>text-decoration-line: none;</h2>
    <p class="gfg">
      GeeksforGeeks: A computer science portal
    </p>
 
 
</body>
</html>

Output:

underline: It is used to display a line below or under a text.

Syntax:

text-decoration-line: underline;

Example: This example demonstrates the use of text-decoration-line Property whose value is set to underline.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> text-decoration-line property </title>
     
    <!-- text-decoration-line property used here -->
    <style>
    h1 {
        color: green;
        text-decoration-line: underline;
    }
     
    .gfg {
        text-decoration-line: underline;
        font-weight: bold;
    }
    </style>
</head>
 
<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2>text-decoration-line:underline;</h2>
    <p class="gfg">
      GeeksforGeeks: A computer science portal
    </p>
 
 
</body>
</html>

Output:

overline: It is used to display a line over the text.

Syntax:

text-decoration-line: overline;

Example: This example demonstrates the use of text-decoration-line Property whose value is set to overline.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> text-decoration-line property </title>
   
    <!-- text-decoration-line property used here -->
    <style>
    h1 {
        color: green;
        text-decoration-line: overline;
    }
     
    .gfg {
        text-decoration-line: overline;
        font-weight: bold;
    }
    </style>
</head>
 
<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2>text-decoration-line:overline;</h2>
    <p class="gfg">
      GeeksforGeeks: A computer science portal
    </p>
 
 
</body>
</html>

Output:

line-through: It is used to display a line through a text.

Syntax:

text-decoration-line: line through;

Example: This example demonstrates the use of text-decoration-line Property whose value is set to line-through.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> text-decoration-line property </title>
    <!-- text-decoration-line property used here -->
    <style>
    h1 {
        color: green;
        text-decoration-line: line-through;
    }
     
    .gfg {
        text-decoration-line: line-through;
        font-weight: bold;
    }
    </style>
</head>
 
<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2>text-decoration-line:line-through;</h2>
    <p class="gfg">
      GeeksforGeeks: A computer science portal
    </p>
 
 
</body>
</html>

Output:

initial: It is used to set an element’s CSS property to its default value. It is the same as none property.

Syntax:

text-decoration-line: initial;

Example: This example demonstrates the use of text-decoration-line Property whose value is set to initial.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> text-decoration-line property </title>
     
    <!-- text-decoration-line property used here -->
    <style>
    h1 {
        color: green;
        text-decoration-line: initial;
    }
     
    .gfg {
        text-decoration-line: initial;
        font-weight: bold;
    }
    </style>
</head>
 
<body style="text-align:center">
    <h1>GeeksforGeeks</h1>
    <h2>text-decoration-line:initial;</h2>
    <p class="gfg">
      GeeksforGeeks: A computer science portal
    </p>
 
 
</body>
</html>