Skip to content
Related Articles

Related Articles

CSS text-decoration Property

View Discussion
Improve Article
Save Article
  • Last Updated : 19 Oct, 2021

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. Text decorations are drawn across child text elements that means if the parent element specifies a text-decoration then its child element can not remove the decoration specified the parent element.

Syntax:

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

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

text-decoration-line: It is used to sets various kinds of text-decoration (e.g. underline, overline, etc).

Syntax:

 text-decoration: text-decoration-line;

Example: This example illustrates the use of the text-decoration-line Property whose values can be set as underline, line-through, overline. 

HTML




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

Output:

text-decoration-style: It is used to set the text-decoration of an element(e.g. dotted, wavy, etc).

Syntax:

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

Example: This example illustrates the use of the text-decoration-style property.

HTML




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

Output:

text-decoration-color: It is used to specify the color of decorations(overlines, underlines, and line-throughs) over the text.

Syntax:

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

Example: This example illustrates the use of the text-decoration-color property.

HTML




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

Output:

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

Syntax:

 text-decoration: initial;

Example: This example illustrates the use of the text-decoration property whose value is set to initial.

HTML




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

Output:

inherit: It is used to inherit a property to an element from its parent element property value.

Syntax:

 text-decoration: inherit;

Example: This example illustrates the use of the text-decoration property whose value is set to inherit.

HTML




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

Output:

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

  • Google Chrome 1.0
  • Internet Explorer 3.0
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.0

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!