Related Articles

Related Articles

CSS | text-decoration Property
  • Last Updated : 09 Aug, 2019

The text-decoration property is used to “decorate” the content of the text. It is essentially decorating the text with different kinds of lines. It is a shorthand property for text-decoration-line(required), text-decoration-color, and text-decoration-style.
Syntax:

text-decoration: text-decoration-line text-decoration-style 
text-decoration-color|initial|inherit;

Property values:

  • text-decoration-line: Specifies the kind of decoration used (e.g. underline, overline etc).
    Syntax:

     text-decoration: text-decoration-line;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      
    <head>
        <meta charset="utf-8">
        <title>text-decoration</title>
        <style>
            h1 {
                color: green;
            }
              
            body {
                text-align: center;
            }
              
            ul li {
                margin-top: 15px;
            }
              
            #example1 {
                text-decoration: underline;
            }
              
            #example2 {
                text-decoration: line-through;
            }
              
            #example3 {
                text-decoration: overline;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h2> text-decoration: text-decoration-line;</h2>
        <ul>
            <li id="example1">Welcome geeks!</li>
            <li id="example2">Welcome geeks!</li>
            <li id="example3">Welcome geeks!</li>
        </ul>
    </body>
      
    </html>
    </html>

    chevron_right

    
    

    Output:

  • text-decoration-style: Specifies the style of decoration used (e.g. dotted, wavy etc).
    Syntax:



     text-decoration: text-decoration-line text-decoration-style;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      
    <head>
        <meta charset="utf-8">
        <title>text-decoration</title>
        <style>
            h1 {
                color: green;
            }
              
            body {
                text-align: center;
            }
              
            ul li {
                margin-top: 15px;
            }
              
            #example1 {
                text-decoration: underline dotted;
            }
              
            #example2 {
                text-decoration: underline wavy;
            }
              
            #example3 {
                text-decoration: underline dashed;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h2
          text-decoration: 
          text-decoration-line text-decoration-style;
        </h2>
        <ul>
            <li id="example1">Welcome geeks!</li>
            <li id="example2">Welcome geeks!</li>
            <li id="example3">Welcome geeks!</li>
        </ul>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • text-decoration-color: Specifies the color of decoration.
    Syntax:

    text-decoration: text-decoration-line text-decoration-color;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
     
    <head>
        <meta charset="utf-8">
        <title>text-decoration</title>
        <style>
            h1 {
                color: green;
            }
              
            body {
                text-align: center;
            }
              
            ul li {
                margin-top: 15px;
            }
              
            #example1 {
                text-decoration: underline wavy green;
            }
              
            #example2 {
                text-decoration: line-through red;
            }
              
            #example3 {
                text-decoration: overline blue;
            }
        </style>
    </head>
     
    <body>
        <h1>GeeksforGeeks</h1>
        <h2>
         text-decoration: 
         text-decoration-line text-decoration-color;
        </h2>
        <ul>
            <li id="example1">Welcome geeks!</li>
            <li id="example2">Welcome geeks!</li>
            <li id="example3">Welcome geeks!</li>
        </ul>
    </body>
     
    </html>

    chevron_right

    
    

    Output:

  • initial: It sets the property to its default value.
    Syntax:

     text-decoration: initial;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      
    <head>
        <meta charset="utf-8">
        <title>text-decoration</title>
        <style>
            h1 {
                color: green;
            }
              
            body {
                text-align: center;
            }
              
            #example1 {
                text-decoration: initial;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h2> text-decoration: initial;</h2>
        <a href="#">
         This is a link without text-decoration.
        </a>
        <br>
        <br>
        <a id="example1" href="#">
         This is a link with text-decoration set to initial.
        </a>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • inherit:It inherits this property from its parent element.
    Syntax:

     text-decoration: inherit;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      
    <head>
        <meta charset="utf-8">
        <title>text-decoration</title>
        <style>
            h1 {
                color: green;
            }
              
            body {
                text-align: center;
            }
              
            #example1 {
                text-decoration: underline wavy green;
            }
              
            #example1child {
                text-decoration: inherit;
                font-weight: bold;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h2> text-decoration: inherit;</h2>
        <p id="example1">
         I am parent and 
         <span id="example1child">
         this my is child.</span>
        </p>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

Supported browsers: The browsers supported by text-decoration Property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :