Die Eigenschaft text-decoration wird verwendet, um den Inhalt des Textes zu „dekorieren“. Es schmückt den Text im Wesentlichen mit verschiedenen Arten von Linien. Es ist eine Kurzformeigenschaft für text-decoration-line (erforderlich), text-decoration-color und text-decoration-style .
Syntax:

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

Eigenschaftswerte:

  • text-decoration-line : Gibt die Art der verwendeten Dekoration an (z. B. unterstrichen, überstrichen usw.).
    Syntax:
     Textdekoration: Textdekorationszeile;

    Beispiel:




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

    Ausgabe:

  • text-decoration-style : Gibt den verwendeten Dekorationsstil an (z. B. gepunktet, wellig usw.).
    Syntax:

    Textdekoration: Textdekorationszeile Textdekorationsstil;

    Beispiel:




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

    Ausgabe:

  • text-decoration-color : Gibt die Farbe der Dekoration an.
    Syntax:
    Textdekoration: Textdekorationszeile Textdekorationsfarbe;

    Beispiel:




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

    Ausgabe:

  • initial : Es setzt die Eigenschaft auf ihren Standardwert.
    Syntax:
    Textdekoration: Initiale;

    Beispiel:




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

    Ausgabe:

  • erben : Es erbt diese Eigenschaft von seinem übergeordneten Element.
    Syntax:
    Textdekoration: erben;

    Beispiel:




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

    Ausgabe:

Unterstützte Browser: Die von text-decoration Property unterstützten Browser sind unten aufgeführt:

  • Google Chrome
  • Internet Explorer
  • Feuerfuchs
  • Oper
  • Safari