3 examples of CSS text-decoration with underline, overline and links

3 examples of CSS text-decoration with underline, overline and links

The text-decoration property of CSS

The text-decoration property is used to set the text as underline, overline, line-through or normal in the web pages.

>>A link without underline example

The underline in the links can also be removed by using the text-decoration CSS property. Besides, the line-through value can be used to present out-dated information, for example.

Syntax of text-decoration property

Following is the general syntax to use the text-decoration property:

text-decoration: value;

Where the value can be any of the following:

  • none: Normal text.
  • underline: a line under the text.
  • overline: A line above the text.
  • line-through: A line across the given text.

Also: Watch the short video of text-decoration property

CSS underline example

The following is an underline example. In this example, we will use the text-decoration property to add an underline in the div text. Along with underline text, it also shows using the overline value in the h1 heading.

CSS underline

Experience this example online

A link without underline example

As mentioned earlier, you may use the text-decoration property to remove underlines in HTML links as well. By default, the links are underlined. By using the CSS, underline can be removed as shown in the example below:

CSS text decoration

Experience this example online

As you can see, by simply using the CSS text-decoration property as none, the underline can be removed in the links.

Example of  text-decoration with line-through

This example uses the line-through value in the text-decoration property to add line through the text in a div tag.

CSS line-through property

Experience this example online

 

Read more: CSS vertical-align