CSS text-decoration

CSS text-decoration property decides the position of line for text. The line may be over the text, under the text or through the text. And it also defines the color and style of the line.

The text-decoration property is a shorthand property of text-decoration-line, text-decoration-color, and text-decoration-style.

1. text-decoration-line

It represents the vertical position of line on the text. The following values represent different positions of the line vertically.

none

This value means there is no text-decoration-line. The anchor text is underlined by default but this property can remove the line under the text.

<style>
a{
 text-decoration-line:none;
}
</style>
Try </>

We often use it to remove the line under text while making a sidebar or navbar.

underline

This value defines a line under the text.

<style>
p{
 text-decoration-line:underline;
}
</style>
Try </>

overline

overline value defines the line over the text. It is opposite of the underline text.

<style>
p{
 text-decoration-line:overline;
}
</style>
Try </>

line-through

In this case the line crosses through the middle of the text.

<style>
span{
 text-decoration-line:line-through;
}
</style>
Try </>

2. text-decoration-color

It represents the color of the text-decoration-line for the text.

<style>
a.first{
 text-decoration-color:red;
}
a.second{
 text-decoration-color:green;
}
</style>
Try </>

3. text-decoration-style

It represents the style of the line for the text. The following are the styles of line.

text-decoration - a shorthand property

It is a shorthand property for all of the text-decoration properties given above.

text-decoration property represents the text-decoration-color, text-decoration-style and text-decoration-line properties of the line.