W3docs
en
Log in

CSS text-decoration-line Property

Use the text-decoration CSS shorthand property to specify the kind of line to use for text decoration. See property values and try examples.

The text-decoration-line property specifies the kind of line 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.

Info

The text-decoration-line property is fully supported in all modern browsers without vendor prefixes.

Initial Valuenone
Applies toAll elements. It also applies to ::first-letter and ::first-line.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.textDecorationLine = "overline underline";

Syntax

CSS text-decoration-line syntax

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

Example of the text-decoration-line property:

CSS text-decoration-line code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        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

CSS text-decoration-line Property

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

CSS text-decoration-line with underline value example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        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:

CSS text-decoration-line with line-through value example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        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:

CSS text-decoration-line all values example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 20px 0;
      }
      div.t1 {
        text-decoration-line: none;
      }
      div.t2 {
        text-decoration-line: underline;
      }
      div.t3 {
        text-decoration-line: line-through;
      }
      div.t4 {
        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

ValueDescriptionPlay it
noneNo line is specified.Play it »
underlineSpecifies a line under the text.Play it »
overlineSpecifies a line over the text.Play it »
line-throughSpecifies a line through the text.Play it »
initialMakes the property use its default value.Play it »
inheritInherits the property from its parents element.

The text-decoration-line property previously supported a blink value that made text blink, but this value is now deprecated.

Practice

Practice

Which of these are valid values for the 'text-decoration-line' property in CSS?