CSS Text Decorations- Overline, Underline, Line-through

In this article, we will go over how to add the text decorations, overline, underline, and line-through to text using CSS.

Overline

The following text below is styled with the CSS overline property.

This text is styled with the CSS overline property. You can see the straight line above this text.

You see how this overline creates a line over the text.

To create an overline over text which is written, add the following line in the CSS page of the element which you are styling:

.paragraph { text-decoration:overline; }

Underline

The following text below is styled with the CSS underline property.

This text is styled with the CSS underline property. You can see the line below this text.

You see how this underline property creates a line below the text.

To create an underline beneath the text which is written, add the following line in the CSS page of the element which you are styling:

.paragraph { text-decoration:underline; }

Line-through

The following text below is styled with the CSS line-through property.

This text is styled with the CSS line-through property. You can see the line which goes through the middle of the text.

You see how this line-through property creates a line through the text.

To create an line through the text which is written, add the following line in the CSS page of the element which you are styling:

.paragraph { text-decoration:line-through; }

No Text Decoration

For most HTML elements, the default is that there is no text decoration on an element unless specified. However, for others, there may be.

So, If you want no text decorations added to text, with absolute certainty, put the following line in the CSS page of the element which you are styling:

.paragraph { text-decoration:none; }