Text-decoration Property in CSS

Making a website eye-catchy is something that most web developers take good care of. Web developers apply colors, alignments, and decorations to the text appearing on the website. Text on websites can be enhanced using a wide range of properties that are provided by CSS. One such property is the text-decoration property that lets you apply enhancing lines on the text. This tutorial is designed to enlighten its readers about the text-decoration in CSS.

text-decoration Property in CSS

As mentioned already, the text-decoration property in CSS adds enhancing lines on the text appearing on a web page. The text-decoration property allows you can apply an underline, overline, line-through, and a combination of these to the specified text.

Syntax

It has the following syntax

p {
text-decoration: overline;
}

How to apply underline to text

Using the text-decoration property, you can underline a specific text.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: underline;
}

</style>
</head>
<body>

<h1>CSS Text Decoration</h1>

</body>
</html>

Output
The text has been underlined.

How to apply overline to text

Using the text-decoration property, you can set an overline on a specific text. Consult the example below.

h1 {
text-decoration: overline;
}

Output

An overline has been set on the text.

How to apply line-through to text

Using the text-decoration property, you can set a line-through on a specific text. Use the following piece of code.

h1 {
text-decoration: line-through;
}

Output

A line-through has been applied to the text.

How to apply a combination of the above techniques to text

Using the text-decoration property, you can use a combination of underline, overline, and line-through on a specific text. Use the following piece of code.

h1 {
text-decoration: underline overline;
}

Output

The text has been underlined as well as overlined.

text-decoration a shorthand Property

A shorthand property in CSS is a property that lets you apply different values to other numerous CSS properties at once, saving your time and energy. The text-decoration property is also regarded as a shorthand property because it can be used to set values to following properties;

text-decoration-line
text-decoration-color
text-decoration-style.

Before we demonstrate text-decoration property as a shorthand property with the help of an example. Lets first understand what these properties are.

text-decoration-line: This property is similar to the text-decoration property and can be used to apply decorations to the text.

text-decoration-color: This property is used to apply color to the decoration applied on the text.

text-decoration-style: The text-decoration-style property is used to apply different styles such as solid, wavy, dotted, dashed, and doubled to the text decoration (underline, overline, line-through, or a combination).

Let’s explore text-decoration as a shorthand property with the help of examples.

Example 1

In the following example, we are applying color and style to text decoration using only the text-decoration property.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: underline wavy red;
}

</style>
</head>
<body>

<h1>CSS Text Decoration</h1>

</body>
</html>

Output

The text has decorated using a wavy red underline.

Example 2

In the following example, we are applying a combination of underline and overline and setting the color and style as well.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: underline overline solid red;
}

</style>
</head>
<body>

<h1>CSS Text Decoration</h1>

</body>
</html>

Output

The text has been decorated using a solid red underline and overline.

Conclusion

The text-decoration property in CSS lets you add enhancing lines to the text on web pages. These lines can be an underline, line-through, overline, or a combination of these to a specific text. This property is referred to as a shorthand property because you can set values to text-decoration-line, text-decoration-color, and text-decoration-style properties. This write-up, discusses the text-decoration property in depth, along with suitable examples.

Text-decoration Property in CSS