In this section, we will learn what the text-decoration-line property is and how to use it in CSS.

CSS text-decoration-line Property Definition and Usage

CSS is all about appearances!

So far, pretty much any property we’ve introduced affects the text itself. For example, styling, changing the size, uppercasing, changing the font type, changing the color of text, etc.

There’s another property called `text-decoration-line` that we can use to decorate a text.

This property decorates a text content by adding lines to it.

CSS text-decoration-line Property Syntax

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

CSS text-decoration-line Property Value

There are 3 values that we can assign to this property:

• underline: using the value “underline” we can add a line right under the text.
• overline: using the value “overline” we can add a line right on top of the text.
• line-through: using the value “line-through” we can add a line that passes through the text.

Note: by default, this property inherits its value from its parent.

The two global values, “initial” and “inherit” can also be used for this property.

Example: CSS line through

See the Pen CSS line through by Enjoy Tutorials (@enjoytutorials) on CodePen.

Remove Underline CSS

By default, an HTML element like <a> has a line decorated under its text content.

Now that we know CSS text-decoration-line property is in charge of this line, we can easily remove it whenever it’s needed.

Example: CSS remove underline

See the Pen CSS remove underline by Enjoy Tutorials (@enjoytutorials) on CodePen.