CSS Text-Decoration Property

The text-decoration property specifies how text is decorated. Possible values are:

• underline: adds an underline to the text
• overline: adds a line on top of the text
• line-through: adds a line through the middle of the text.
• blink: causes the text to blink. This value has been deprecated in CSS3 and many major browsers no longer support this today.

Below are examples of text-decoration:

Example 1: Underline

CSS Declaration

p {text-decoration: underline;}

The following HTML,

<p>This is an underline example.

renders:

Example 2: Overline

CSS Declaration

p {text-decoration: overline;}

The following HTML,

<p>This is an overline example.

renders:

Example 3: Line-through

CSS Declaration

p {text-decoration: line-through;}

The following HTML,

<p>This is a strike-through example.

renders:

In CSS3, the text-decoration has become a shorthand for the following three properties:

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

Many modern browsers do not yet support these three properties. So before you use any of these three properties, make sure you test it before releasing the code to ensure the desired effects are visible on current browsers.

Text-decoration-line

The text-decoration-line property has the same effects as the original text-decoration property. It has the same possible values:

• underline: adds an underline to the text
• overline: adds a line on top of the text
• line-through: adds a line through the middle of the text.

Text-decoration-color

The text-decoration-color property specifies the color of the text decoration line. Possible values include:

• Hexadecimal code
• Color name
• RGB code
• RGBa code
• HSL code
• HSLa

For detailed explanations of each value type, see the CSS color property page.

text-decoration-style

The text-decoration-style property defines the style of the text decoration line. Possible styles include the following:

• solid
• double
• dotted
• dashed
• wavy