X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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.

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

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

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

An example with "underline" value:

Example

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

Another example with "line-through" value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
      -webkit-text-decoration-line: line-through; /* Safari */
      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>

In this example all the values are specified:

Example

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

Values

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

Browser support

57.0+ x 36.0+ 12.1+ v

Practice Your Knowledge

The text-decoration property's values are



Do you find this helpful?

Related articles