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.

The -webkit- extension for Safari is used with the text-decoration-line property.

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

Values

Value	Description	Play it
none	No line is specified.	Play it »
underline	Specifies a line under the text.	Play it »
overline	Specifies a line over the text.	Play it »
line-through	Specifies a line through the text.	Play it »
initial	Makes the property use its default value.	Play it »
inherit	Inherits the property from its parents element.