An Intro to the CSS text-decoration Property

Description

This property specifies the decorations that will be applied to the text content of an element. These decorations are rendered in the color specified by the element’s color property. The text decorations are not technically inherited, but the effect is similar to inheritance. If they’re set on an inline element, they apply to all boxes generated by that element. If they’re set on a block-level element, the setting is applied to an anonymous inline box that encompasses all inline children in the normal flow, and also to all block-level descendants in the normal flow. The decorations are not propagated to floated or absolutely positioned descendants, or to descendant inline tables or inline blocks. Also, text decorations on inline boxes are rendered along the entire box, even if it contains descendant boxes. This, too, may appear similar to inheritance. Any text decoration setting on a descendant box can never “undo” the text decorations of an ancestor box.

Example

With the following rules applied, unvisited anchor links are bold, but have no underline, visited links have a line through them, and links in the hover or focus state have a line above and below them:

a:link {
  font-weight: bold;
  text-decoration: none;
}
a:visited {
  font-weight: bold;
  text-decoration: line-through;
}
a:hover, a:focus {
  text-decoration: underline overline;
}

Value

line-through – This value draws a horizontal line through the text.
none – This value produces no text decoration (although it doesn’t undo a decoration that’s set on an ancestor element).
overline – This value draws a horizontal line above the text.
underline – This value draws a horizontal line below the text.

Frequently Asked Questions about CSS Text Decoration

What is the difference between ‘text-decoration-line’, ‘text-decoration-color’, and ‘text-decoration-style’ in CSS?

In CSS, ‘text-decoration-line’ is used to specify the type of text decoration to be added to an element. It can take values like ‘underline’, ‘overline’, ‘line-through’, and ‘none’.

On the other hand, ‘text-decoration-color’ is used to specify the color of the text decoration. It can take any valid color value.

Lastly, ‘text-decoration-style’ is used to specify the style of the line in a text decoration. It can take values like ‘solid’, ‘double’, ‘dotted’, ‘dashed’, and ‘wavy’.

How can I remove text decoration from a link in CSS?

To remove text decoration from a link, you can use the ‘text-decoration’ property and set its value to ‘none’. Here’s an example:

a {
text-decoration: none;
}

This will remove the underline that is typically displayed for links.

Can I apply multiple text decorations to a single element?

Yes, you can apply multiple text decorations to a single element by using the ‘text-decoration-line’ property. You can specify multiple values for this property, separated by spaces. For example:

p {
text-decoration-line: underline overline;
}

This will apply both an underline and an overline to the paragraph text.

How can I change the style of an underline in CSS?

You can change the style of an underline in CSS using the ‘text-decoration-style’ property. This property can take values like ‘solid’, ‘double’, ‘dotted’, ‘dashed’, and ‘wavy’. For example:

p {
text-decoration-line: underline;
text-decoration-style: wavy;
}

This will apply a wavy underline to the paragraph text.

How can I apply text decoration to only a part of the text?

To apply text decoration to only a part of the text, you can use the ‘span’ element to target the specific part of the text. For example:

This is a <span class="underline">underlined</span> text.

.underline {
text-decoration: underline;
}

This will apply an underline to only the word “underlined”.

How can I make a dashed underline in CSS?

To make a dashed underline in CSS, you can use the ‘text-decoration-style’ property and set its value to ‘dashed’. Here’s an example:

p {
text-decoration-line: underline;
text-decoration-style: dashed;
}

This will apply a dashed underline to the paragraph text.

How can I change the color of an underline in CSS?

To change the color of an underline in CSS, you can use the ‘text-decoration-color’ property. This property can take any valid color value. For example:

p {
text-decoration-line: underline;
text-decoration-color: red;
}

This will apply a red underline to the paragraph text.

Can I use the ‘text-decoration’ shorthand property to specify all text decoration properties at once?

Yes, you can use the ‘text-decoration’ shorthand property to specify the ‘text-decoration-line’, ‘text-decoration-color’, and ‘text-decoration-style’ properties at once. For example:

p {
text-decoration: underline red wavy;
}

This will apply a red, wavy underline to the paragraph text.

How can I apply a line-through decoration to text in CSS?

To apply a line-through decoration to text in CSS, you can use the ‘text-decoration-line’ property and set its value to ‘line-through’. Here’s an example:

p {
text-decoration-line: line-through;
}

This will apply a line-through decoration to the paragraph text.

How can I remove all text decorations from an element in CSS?

To remove all text decorations from an element, you can use the ‘text-decoration’ property and set its value to ‘none’. Here’s an example:

p {
text-decoration: none;
}

This will remove all text decorations from the paragraph text.