CSS Text Decoration

The last formatting property is text-decoration. It is used to remove the underlines and other effects of the text. It is normally used to remove the underline from hyperlinks.

Property Values

The possible values are as follows:

Values Description
none It removes any extra formatting and makes the text normal.
underline It adds an underline.
overline It adds a line over the text.
line-through It creates a strike through effect.
blink It makes the text flash on and off.
dashed It makes the text dashed.
dotted It makes the text dotted.
double The line will display as a double line.
inherit It inherits the decoration of the parent.
initial It sets this property to its default value.
solid The line will display as a single line. It is default value.
wavy It gives wavy effect to text.

Text Decoration Example

Below examples will demonstrate the basic architecture of Text Decoration

p {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}


It can also be written as

p {
  text-decoration: underline wavy red;
}


Example:
<!doctype html>  
<html>

    <head>
        <title>...</title>
    </head>
  
    <body>
       <p style="text-decoration: underline wavy red;">Learn CSS from PHPDocs.</p>
    </body>

</html>