CSS text-decoration-line Property

CSS text-decoration-line property defines the type of the decoration line such as ‘underline’, ‘overline’, ‘line-through’, etc. The decoration lines are generally used with hyperlinks.

Example:

.p1{
  text-decoration-line: underline;
}
.p2{
  text-decoration-line: overline;
}
.p3{
  text-decoration-line: line-through;
}

The text-decoration-line property can also accept multiple values. These values must be space-separated. See the example below:

Example:

.p1{
  text-decoration-line: underline overline;
}
.p2{
  text-decoration-line: underline overline line-through;
}

CSS Syntax

The text-decoration-line property has the following syntax:

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

Property Values

The text-decoration-line property accepts the following values:

noneSpecifies no underline. This is the default value. It is generally used to remove default underline from the hyperlinks.
underlineSets a line under the text.
overlineSets a line over the text.
line-throughSets a line over the text. This is generally used for non-active links.
initialSets the text-decoration-line to its default value(none).
inheritInherits the text-decoration-line property from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.textDecorationLine = “line-through”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.