The text-decoration-line property

The text-decoration-line property specifies a position of a decorative line. The property should be used in conjunction with the text-decoration-style and text-decoration-color properties. These properties extend the functionality of the text-decoration property, being more advanced analogues.

Syntax

selector {
	text-decoration-line: underline | line-through | overline | none;
}

Values

Value	Description
`underline`	Makes an underlined text.
`line-through`	Makes a line-through text.
`overline`	Makes a line above a text.
`none`	Undoes underlining of the underlined element. Most often used for links as they are underlined by default.

Default value: none. For links the default value is: underline.

Example

Let's cross out the text with a red line:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-decoration-style: solid;
	text-decoration-color: red;
	text-decoration-line: line-through;
}