CSS text-decoration-line

The text-decoration-line property in CSS is used to specify the decoration to be applied to text. This property allows you to control the style of the text decoration, such as underline, overline, line-through, and blink.

Syntax:


selector {
  text-decoration-line: value;
}

Here are the possible values for the text-decoration-line property:

  1. none: No text decoration is applied.
  2. underline: Adds a line underneath the text.
  3. overline: Adds a line over the text.
  4. line-through: Adds a line through the middle of the text.
  5. blink: Makes the text blink on and off (not supported by all browsers).

Examples:

Example 1:

Result:

This is an example of underlined text.


<p style="text-decoration-line: underline;">This is an example of underlined text.</p>

Example 2:

Result:

This is an example of text with a line through it.


<p style="text-decoration-line: line-through;">This is an example of text with a line through it.</p>

Example 3:

Result:

This is an example of text with a line over it.


<p style="text-decoration-line: overline;">This is an example of text with a line over it.</p>

You can experiment with different values of the text-decoration-line property to achieve the desired text decoration effect on your webpage.