text-decoration

Overview

text-decoration is a shorthand property for setting decorative lines on text. It comprises of text-decoration-line, text-decoration-color, text-decoration-style, and the more recent addition text-decoration-thickness.

When you apply text-decoration to an element, it influences all text descendants in that element. However, the precise effect and behavior can differ based on the CSS rules in place, especially concerning parent-child relationships in HTML.

Examples and Usage

In the section below, we'll explore different aspects of the text-decoration property through several examples. We'll apply different styles, colors, and thickness to our text using this shorthand property.

HTML Structure

<p class="overline">Web Reference</p>

<p class="line-through">CSS1 and CSS2</p>

<p class="underline">Web Reference</p>

<p class="double-decoration">Web Reference</p>

<p class="wavy-decoration">Web Reference</p>

<p class="dashed-decoration">Web Reference</p>

<p class="thick-underline">
  Web Reference - Learn how to build for the Web, and have some fun.
</p>

CSS Styling

.overline {
  text-decoration: overline; /* Single overline */
}

.line-through {
  text-decoration: line-through; /* Single line-through */
}

.underline {
  text-decoration: underline; /* Single underline */
}

.double-decoration {
  text-decoration: underline overline red; /* Double decoration with color */
}

.wavy-decoration {
  text-decoration: wavy overline orange; /* Wavy line style with color */
}

.dashed-decoration {
  text-decoration: dashed overline crimson; /* Dashed line style with color */
}

.thick-underline {
  text-decoration: solid underline royalblue 3px; /* Solid line style with color and thickness */
}

Let's examine the variations of text-decoration used in the examples:

• The .overline class applies a single overline to the text.

• The .line-through class adds a line-through decoration, giving the text a strikethrough effect.

• The .underline class underlines the text.

• The .double-decoration class adds both underline and overline decorations, and also changes their color to red.

• The .wavy-decoration class creates a wavy overline with an orange color.

• The .dashed-decoration class creates a dashed overline with a crimson color.

• Lastly, the .thick-underline class demonstrates the use of the text-decoration-thickness property by setting the underline to a thickness of 3px and giving it a royal blue color.

Values

The text-decoration property accepts the following values:

Associated Properties

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

Tips and Tricks

• The text-decoration property can be used to control the appearance of links. However, be mindful when removing underlines from links as users often rely on this visual cue to identify clickable elements.

• When using the text-decoration shorthand, any omitted values will default to their initial values. For instance, if you don't specify text-decoration-color, it will default to the current text color.

• text-decoration-thickness is a newer addition to fine-tune the appearance of your text decoration.

Browser Compatibility

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

text-decoration

text-decoration Shorthand

Safari versions (8-16.3), (16.4), and (16-TP), require vendor prefixes for proper functioning. For more details, refer to the first link in the Useful Resources below.

text-decoration-thickness in the Shorthand

Useful Resources

Can I use: text-decoration

Can I use: text-decoration shorthand

Can I use: text-decoration-thickness in the shorthand

W3C's Editor's Draft of CSS Text Decoration Module Level 3: text-decoration

W3C's Working Draft of CSS Text Decoration Module Level 4: text-decoration-thickness