/    /  CSS text-decoration

CSS text-decoration

 

CSS text-decoration property decorates the text with several kinds of lines. This is shorthand for text-decoration-line, text-decoration-color, and text-decoration-style.

 

text-decoration-line:

 

text-decoration like overline, underline, or line-through.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
  <title>text-decoration</title>
  <style>                    
    body {
      text-align: center;
    }
     p{
                font-size: 30px;
                }
    #p1 {
      text-decoration: underline;
    }
    #p2 {
      text-decoration: line-through;
    }
    #p3 {
      text-decoration: overline;
    }
           #p4 {
      text-decoration: overline underline line-through;
    }
  </style>
</head>

<body>
  <div>
    <p id="p1">This is underline</p>
    <p id="p2">This is line-through</p>
    <p id="p3">This is overline</p>
              <p id="p4">This is the combination of lines</p>
  </div>
</body>
</html>

 

OUTPUT:

 

CSS text-decoration

 

text-decoration-style:

 

The values are solid, dotted, wavy, double, and dashed.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
  <title>text-decoration</title>
  <style>                    
    body {
      text-align: center;
    }
     p{
                font-size: 30px;
                }
    #p1 {
      text-decoration: underline double;
    }
    #p2 {
      text-decoration: line-through dashed;
    }
    #p3 {
      text-decoration: dotted overline;
    }
              #p4 {
      text-decoration: lightblue wavy overline underline line-through;
                      color:red;
    }
  </style>
</head>

<body>
  <div>
    <p id="p1">This is double underline</p>
    <p id="p2">This is dashed line-through</p>
    <p id="p3">This is dotted overline</p>
              <p id="p4">This is the wavy combination of lines</p>
  </div>
</body>

</html>

 

OUTPUT:

 

CSS text-decoration

 

text-decoration-color:

 

The  value is any color in a valid format.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
  <title>text-decoration</title>
  <style>                    
    body {
      text-align: center;
    }
     p{
                font-size: 30px;
                }
    #p1 {
      text-decoration: underline double cyan;
    }
    #p2 {
      text-decoration: line-through dashed green;
    }
    #p3 {
      text-decoration: dotted overline blue;
    }
                     #p4 {
      text-decoration: lightblue wavy overline underline line-through;
                      color:red;
    }
  </style>
</head>

<body>
  <div>
    <p id="p1">This is double underline</p>
    <p id="p2">This is dashed line-through</p>
    <p id="p3">This is dotted overline</p>
              <p id="p4">This is the wavy combination of lines</p>
  </div>
</body>

</html>

 

OUTPUT:

 

CSS text-decoration