Css - text-decoration-line property

About

text-decoration-line ¹⁾ defines the line property of the text decorations properties

Values

Accepts none, or one or more whitespace separated values:

• none: Produces no text decoration.
• underline: Each line of text is underlined. Underline decorations are positioned under the text,
• overline. Each line of text has a line above it. overline decorations are positioned above the text
• line-through: line-through decorations are positioned through the middle of the text. Each line of text has a line through the middle.

Example

Base

.textUnderline {
    text-decoration-line:underline;
}
.textOverline {
    text-decoration-line:overline;
}
.textLineThrough {
    text-decoration-line:line-through;
}

<p class="textUnderline">text Underlined</p>
<p class="textOverline">text Overlined</p>
<p class="textLineThrough">text with a line through</p>

Mixed

.textLineDotted {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  /** ie same as `text-decoration: underline dotted` */
}

<p class="textLineDotted">text with a line dotted</p>