Aquileo | CSS text-decoration-line Property

The text-decoration-line property in CSS is used to define the type of text decoration applied to text elements. It allows developers to add effects like underlines, overlines, or strike-through lines to enhance text styling.

Supports decoration values such as underline, overline, and line-through.
Can be combined with text-decoration-style and text-decoration-color for advanced decoration effects.
Helps highlight important text and improve the visual presentation of content.

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 in the example below.

1. none:

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

Syntax:

text-decoration-line: none;

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

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>text-decoration-line property</title>

<!--Driver Code Ends-->

    <!-- text-decoration-line property used here -->
    <style>
        h1 {
            color: green;
            text-decoration-line: none;
        }

        .gfg {
            text-decoration-line: none;
            font-weight: bold;
        }
    </style>

<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->

2. underline:

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

Syntax:

text-decoration-line: underline;

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

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title> text-decoration-line property </title>

<!--Driver Code Ends-->

    <!-- text-decoration-line property used here -->
    <style>
        h1 {
            color: green;
            text-decoration-line: underline;
        }

        .gfg {
            text-decoration-line: underline;
            font-weight: bold;
        }
    </style>

<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->

3. overline:

It is used to display a line over the text.

Syntax:

text-decoration-line: overline;

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

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title> text-decoration-line property </title>

<!--Driver Code Ends-->

    <!-- text-decoration-line property used here -->
    <style>
        h1 {
            color: green;
            text-decoration-line: overline;
        }

        .gfg {
            text-decoration-line: overline;
            font-weight: bold;
        }
    </style>

<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->

4. line-through:

It is used to display a line through a text.

Syntax:

text-decoration-line: line through;

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

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title> text-decoration-line property </title>
<!--Driver Code Ends-->

    <!-- 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>

<!--Driver Code Starts-->
</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>
<!--Driver Code Ends-->

5. 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 demonstrates the use of text-decoration-line Property whose value is set to initial.

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title> text-decoration-line property </title>
    
<!--Driver Code Ends-->

    <!-- text-decoration-line property used here -->
    <style>
    h1 {
        color: green;
        text-decoration-line: initial;
    }
    
    .gfg {
        text-decoration-line: initial;
        font-weight: bold;
    }
    </style>

<!--Driver Code Starts-->
</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>

<!--Driver Code Ends-->

CSS text-decoration-line Property

1. none:

2. underline:

3. overline:

4. line-through:

5. initial:

Explore