CSS Tutorial Lesson 15: Text Decoration

In lesson 14, we have learned how to change case of text using text-transform property. In this lesson, we shall learn how to add lines to text using text-decoration property in CSS. The text-decoration property has four values, namely none, underline, overline and line-through.

15.1 None

The none value of text-decoration property removes any lines added to the text. It is commonly used to removed underlines placed by the browsers for hyperlinks. The syntax is as shown in the following example:

h1{text-decoration:none;}

15.2 Underline

The underline value of text-decoration is to place a line under the text, The syntax is shown in the following example:

p{text-decoration:underline;}

15.3 Overline

The overline value of text-decoration is to place a line on top of the text. The syntax is illustrated in the following example:

 span{text-decoration:overline;”}

15.4 Line-Through

The line-through value of text-decoration is to draw a line through the text. The syntax is
illustrated in the following example:
h3{text-decoration:line-through;”}

Example 15.1

What is Text Decoration?

Text decoration is to add underline’ overline and line through the text

To learn more, please follow our CSS Tutorial

 The Output

What is Text Decoration?

Text decoration is to add underline‘ overline and line through the text