CSS Text Decoration

In this chapter you will learn about the following properties:

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration

Add a Decoration Line to Text

The text-decoration-line property is used to add a decoration line to text.

Tip: You can combine more than one value, like overline and underline to display lines both over and under a text.

Example

Output :

Specify a Color for the Decoration Line

The text-decoration-color property is used to set the color of the decoration line.

Example

Output :

Specify a Style for the Decoration Line

The text-decoration-style property is used to set the style of the decoration line.

Output :

Specify the Thickness for the Decoration Line

The text-decoration-thickness property is used to set the thickness of the decoration line.

Example

Output :

The Shorthand Property

The text-decoration property is a shorthand property for:

• text-decoration-line(required)
• text-decoration-color(optional)
• text-decoration-style(optional)
• text-decoration-thickness(optional)

Example

Output :

---