CSS text-decoration-line Property

The text-decoration-line property specifies the kind of line which will be used for text decoration.

The text-decoration-line property is one of the CSS3 properties.

The text-decoration-line property accepts one or more values.

Initial Value	none
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.textDecorationLine = “overline underline”;

Syntax

text-decoration-line: none | underline | overline | line-through | initial | inherit;

Example of the text-decoration-line property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        -webkit-text-decoration-line: overline;
        text-decoration-line: overline;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-line property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>

Result

Example of the text-decoration-line property with the “underline” value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        -webkit-text-decoration-line: underline;
        text-decoration-line: underline;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-line property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>

Example of the text-decoration-line property with the “line-through” value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        -webkit-text-decoration-line: line-through;
        text-decoration-line: line-through;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-line property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>

Example of the text-decoration-line property with all the values:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 20px 0;
      }
      div.t1 {
        -webkit-text-decoration-line: none;
        text-decoration-line: none;
      }
      div.t2 {
        -webkit-text-decoration-line: underline;
        text-decoration-line: underline;
      }
      div.t3 {
        -webkit-text-decoration-line: line-through;
        text-decoration-line: line-through;
      }
      div.t4 {
        -webkit-text-decoration-line: overline;
        text-decoration-line: overline;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-line property example</h2>
    <div class="t1">
      Lorem Ipsum is simply dummy text...
    </div>
    <div class="t2">
      Lorem Ipsum is simply dummy text...
    </div>
    <div class="t3">
      Lorem Ipsum is simply dummy text,,.
    </div>
    <div class="t4">
      Lorem Ipsum is simply dummy text...
    </div>
  </body>
</html>

My Blog