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>

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>

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.

Besides the above-mentioned values the text-decoration-line property had "blink" value which made text blink. This value is deprecated.


Browser support

57.0+ 36.0+ 12.1+

Practice Your Knowledge

The text-decoration property's values are



Do you find this helpful?

Related articles