Skip to content
Related Articles

Related Articles

Improve Article

CSS | text-decoration-line Property

  • Last Updated : 22 Aug, 2019

The text-decoration-line property is used to sets various kind 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 Example- underline and overline values to display lines both under and over the text.

Syntax:

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

Property Values:

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

    Syntax:

    text-decoration-line:none;

    Example:






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




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




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




    <!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 the property to its default value. It is same as none property.

    Syntax:

    text-decoration-line:initial;

    Example:




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

    Output:

    Supported Browsers: The browser supported by text-decoration-line property are listed below:

    • Google Chrome 57.0
    • Firefox 36.0, 6.0 -moz-
    • Apple Safari 7.1 -webkit-
    • Opera 44.0



    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :