CSS Text-Decoration-Style Enhance Text Visuals

CSS text-decoration-style Property

Introduction

The text-decoration-style property in CSS allows you to customize the appearance of text decorations such as underlines, overlines, and line-throughs. This property can help give specific meanings to your text, like showing deleted text with a line-through. However, for better accessibility and semantic meaning, it’s good to use HTML tags like <del> or <s> for such purposes.

Specification

The text-decoration-style property is part of the CSS Text Decoration Module Level 3. This module defines properties for styling text decorations, including underlines, overlines, and line-throughs.

Syntax

The text-decoration-style property is easy to use. It accepts various keyword values that define the style of the text decoration lines.

text-decoration-style: value;

Where value can be one of the following keywords:

• solid: Draws a single, solid line.
• double: Draws two parallel solid lines.
• dotted: Draws a dotted line.
• dashed: Draws a dashed line.
• wavy: Draws a wavy line.

Additionally, the property accepts global values:

• inherit: Inherits the property from its parent element.
• initial: Sets the property to its default value.
• revert: Reverts the property to the user agent’s default.
• revert-layer: Reverts the property to the user agent’s default for the cascade layer.
• unset: Resets the property to its natural value.

Values

The text-decoration-style property accepts several keyword values that determine the style of the text decoration lines:

• solid: Draws a single, continuous line. This is the default value.
• double: Draws two parallel solid lines.
• dotted: Draws a line composed of dots.
• dashed: Draws a line composed of dashes.
• wavy: Draws a wavy line.

Global values include:

• inherit: Inherits the value from the parent element.
• initial: Sets the value to its default (solid).
• revert: Reverts the value to the user agent’s default.
• revert-layer: Reverts the value to the user agent’s default for the cascade layer.
• unset: Resets the value to its natural value.

Formal Definition

• Initial Value: solid
• Applies To: All elements and ::first-letter and ::first-line pseudo-elements.
• Inherited: no
• Computed Value: as specified
• Animation Type: discrete

Examples

Wavy Underline

.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

<p class="wavy">This text has a wavy red line beneath it.</p>

Solid Line Example

p {
  text-decoration-style: solid;
}

.GFG1 {
  text-decoration-line: underline;
}

.GFG2 {
  text-decoration-line: line-through;
}

.GFG3 {
  text-decoration-line: overline;
}

<p class="GFG1">This text has a solid underline.</p>
<p class="GFG2">This text has a solid line-through.</p>
<p class="GFG3">This text has a solid overline.</p>

Double Line Example

p {
  text-decoration-style: double;
}

.GFG1 {
  text-decoration-line: underline;
}

.GFG2 {
  text-decoration-line: line-through;
}

.GFG3 {
  text-decoration-line: overline;
}

<p class="GFG1">This line has a double underline.</p>
<p class="GFG2">This line has a double line-through.</p>
<p class="GFG3">This line has a double overline.</p>

Dotted Line Example

p {
  text-decoration-style: dotted;
}

.GFG1 {
  text-decoration-line: underline;
}

.GFG2 {
  text-decoration-line: line-through;
}

.GFG3 {
  text-decoration-line: overline;
}

<p class="GFG1">This line has a dotted underline.</p>
<p class="GFG2">This line has a dotted line-through.</p>
<p class="GFG3">This line has a dotted overline.</p>

Dashed Line Example

p {
  text-decoration-style: dashed;
}

.GFG1 {
  text-decoration-line: underline;
}

.GFG2 {
  text-decoration-line: line-through;
}

.GFG3 {
  text-decoration-line: overline;
}

<p class="GFG1">This line has a dashed underline.</p>
<p class="GFG2">This line has a dashed line-through.</p>
<p class="GFG3">This line has a dashed overline.</p>

Initial Value Example

p {
  text-decoration-style: initial;
}

.GFG1 {
  text-decoration-line: underline;
}

.GFG2 {
  text-decoration-line: line-through;
}

.GFG3 {
  text-decoration-line: overline;
}

<p class="GFG1">This line has a default underline.</p>
<p class="GFG2">This line has a default line-through.</p>
<p class="GFG3">This line has a default overline.</p>

Inherited Value Example

p {
  text-decoration-style: inherit;
}

.main {
  text-decoration-style: wavy;
}

.GFG1 {
  text-decoration-line: underline;
}

.GFG2 {
  text-decoration-line: line-through;
}

.GFG3 {
  text-decoration-line: overline;
}

<div class="main">
  <p class="GFG1">This line has an inherited underline style.</p>
  <p class="GFG2">This line has an inherited line-through style.</p>
  <p class="GFG3">This line has an inherited overline style.</p>
</div>

Browser Compatibility

Ensuring your web designs work across different browsers is important. Here’s a quick summary of browser support for the text-decoration-style property:

• Google Chrome: Full support since version 57.0.
• Mozilla Firefox: Full support since version 36.0.
• Microsoft Edge: Full support since version 12.
• Safari: Full support since version 5.0.
• Opera: Full support since version 44.0.

Note: Basic values like solid, double, dotted, and dashed are well-supported, but the wavy value might not be supported consistently across all browsers. Always test your designs across multiple browsers.

Browser Compatibility Table

Tips for Ensuring Browser Compatibility

• Test Across Browsers: Always check how your design looks in different browsers.
• Use Fallbacks: When using newer properties like wavy, have a fallback ready.
• Check Documentation: Regularly check browser documentation for the latest updates on property support.

Example of Fallback

Here’s how you can provide a fallback for browsers that don’t support the wavy value:

CSS

.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

/* Fallback for browsers that do not support wavy */
@supports not (text-decoration-style: wavy) {
  .wavy {
    text-decoration-style: dashed;
  }
}

HTML

<p class="wavy">This text has a wavy red line beneath it.</p>

FAQs

What is the text-decoration-style property in CSS?

The text-decoration-style property in CSS sets the style of text decoration lines, like underlines, overlines, or line-throughs. It lets you choose styles such as solid, dotted, dashed, double, or wavy.

How can I make an underline appear wavy in CSS?

To make an underline wavy, use:

text-decoration-line: underline;
text-decoration-style: wavy;

What are the possible values for text-decoration-style?

• solid: A single, continuous line.
• double: Two parallel solid lines.
• dotted: A line composed of dots.
• dashed: A line composed of dashes.
• wavy: A wavy line.

Can text-decoration-style be used with any element?

Yes, it can be applied to any element that supports text decorations, like <p>, <span>, or <a>.

Does text-decoration-style affect text color?

No, it only affects the style of the decoration line. Use text-decoration-color to change the color of the line.

How can I ensure browser compatibility for text-decoration-style?

1. Use Feature Detection: Tools like Modernizr can check if the property is supported.
2. Provide Fallbacks: Use fallback styles for unsupported values.
3. Graceful Degradation: Design so that older browsers still work well.
4. Test Across Browsers: Regularly test on different browsers and devices.

More Examples

Combining Multiple Decoration Styles

Combine different text decoration styles within the same paragraph.

CSS

.mixed-styles {
  text-decoration-line: underline overline;
  text-decoration-style: solid dashed;
  text-decoration-color: blue red;
}

HTML

<p class="mixed-styles">This paragraph has a solid blue underline and a dashed red overline.</p>

Styling Links with Text Decoration

Make links more visually appealing with text decoration styles.

CSS

a {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: blue;
}

a:hover {
  text-decoration-style: wavy;
  text-decoration-color: red;
}

HTML

<p>Visit our <a href="WebsiteUrl">website</a> for more information.</p>

Customizing Text Decoration for Blockquotes

Make blockquotes stand out with text decoration styles.

CSS

blockquote {
  text-decoration-line: underline overline;
  text-decoration-style: double dotted;
  text-decoration-color: gray;
}

HTML

<blockquote>
  This is a quote with custom text decoration styles.
</blockquote>

These examples show how versatile the text-decoration-style property is. Experiment with different styles and elements to create visually engaging and user-friendly web designs. Always test across different browsers for consistent appearance.