CSS text-decoration-color Customizing Text Decorations

Introduction

The text-decoration-color property in CSS allows you to set the color of text decorations like underlines, overlines, and strikethroughs. This property enhances the visual appeal of your web content, making important information stand out.

Specification

The text-decoration-color property is defined in the CSS Text Decoration Module Level 3 specification. This module standardizes the application and management of text decorations across different web browsers.

Description

The text-decoration-color property specifies the color of text decorations such as underlines, overlines, strikethroughs, and wavy lines. By setting the color of these decorations, you can enhance the visual impact of your text and make important information stand out.

Syntax

text-decoration-color: color-value;

The color-value can be any valid CSS color value, including:

• Named colors (e.g., red, blue, green)
• Hexadecimal RGB values (e.g., #ff0000)
• RGB values (e.g., rgb(255, 0, 0))
• RGBA values (e.g., rgba(255, 0, 0, 0.5))
• HSL values (e.g., hsl(0, 100%, 50%))
• HSLA values (e.g., hsla(0, 100%, 50%, 0.5))
• The transparent keyword

Global values include inherit, initial, revert, revert-layer, and unset.

Values

Color Values

• Named Colors: Basic color names like red, blue, green.
• Hexadecimal RGB Values: Hex values like #ff0000 (red), #00ff00 (green), and #0000ff (blue).
• RGB Values: RGB color values in the format rgb(255, 0, 0) (red).
• RGBA Values: RGB color values with an alpha channel for transparency, in the format rgba(255, 0, 0, 0.5) (red with 50% opacity).
• HSL Values: HSL color values in the format hsl(0, 100%, 50%) (red).
• HSLA Values: HSL color values with an alpha channel for transparency, in the format hsla(0, 100%, 50%, 0.5) (red with 50% opacity).
• Transparent: The keyword transparent makes the text decoration invisible.

Global Values

• inherit: Inherits the value of the text-decoration-color property from the parent element.
• initial: Resets the property to its default value, which is currentcolor.
• revert: Reverts the property to the default value as defined by the user agent’s stylesheet.
• revert-layer: Reverts the property to the value of the next outer layer’s cascade.
• unset: Resets the property to its natural value, which means it acts like inherit if the property is inherited or initial if it is not.

Examples

Basic Example

HTML:

<p>
  This paragraph has <s>some erroneous text</s> inside it that I want to call
  attention to.
</p>

CSS:

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

s {
  text-decoration-line: line-through;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Multiple Decoration Colors

HTML:

<p>
  This is a <span class="underline">underline</span>, a <span class="overline">overline</span>, and a <span class="linethrough">strikethrough</span>.
</p>

CSS:

p {
  text-decoration-color: blue;
}

.underline {
  text-decoration-line: underline;
  text-decoration-color: green;
}

.overline {
  text-decoration-line: overline;
  text-decoration-color: red;
}

.linethrough {
  text-decoration-line: line-through;
  text-decoration-color: orange;
}

Using RGBA Values

HTML:

<p class="transparent-underline">
  This text has a semi-transparent underline.
</p>

CSS:

.transparent-underline {
  text-decoration-line: underline;
  text-decoration-color: rgba(0, 0, 255, 0.5); /* Blue with 50% opacity */
}

Inheriting and Resetting Values

HTML:

<div class="parent">
  <p class="child">This text inherits the underline color from the parent.</p>
  <p class="reset">This text resets the underline color to its default value.</p>
</div>

CSS:

.parent {
  text-decoration-line: underline;
  text-decoration-color: purple;
}

.child {
  text-decoration-color: inherit;
}

.reset {
  text-decoration-color: initial;
}

Accessibility

When using the text-decoration-color property, consider accessibility to ensure your web content is usable by all users, including those with disabilities.

Contrast Ratio

Ensure a sufficient contrast ratio between the text color, background color, and text decoration color for readability.

• Use a color contrast checker to verify the contrast ratio meets WCAG standards.
• Aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and decorations.

Avoid Using Color Alone to Convey Meaning

Color alone should not be the only indicator of important information.

• Use additional visual cues, such as icons, bold text, or underlines.
• Ensure interactive elements like links have multiple indicators, such as color change, underline, and a focus state.

Focus Indicators

For interactive elements, ensure the focus state is clearly visible.

• Use a combination of color, border, and other visual cues to indicate focus.
• Test the focus state with keyboard navigation to ensure it is easy to identify.

Screen Readers

Screen readers do not typically announce text decorations.

• Provide clear and descriptive text for important information.
• Use semantic HTML to convey the structure and meaning of your content.

Resources for Accessibility

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

Formal Definition

The text-decoration-color property is formally defined in the CSS Text Decoration Module Level 3.

• Applies to: All elements
• Inherited: Yes
• Percentages: N/A
• Media: Visual
• Computed Value: As specified
• Animation Type: Color

Formal Syntax

text-decoration-color: <color> | inherit | initial | revert | revert-layer | unset;

• <color>: Any valid CSS color value.
• inherit: Inherits the value from the parent element.
• initial: Resets to the default value (currentcolor).
• revert: Resets to the user agent’s default.
• revert-layer: Reverts to the value of the next outer layer’s cascade.
• unset: Resets to the natural value (acts like inherit if inherited, initial if not).

Browser Compatibility

• Google Chrome: Supported since version 57.0.
• Microsoft Edge: Supported since version 79.0.
• Firefox: Supported since version 36.0.
• Opera: Supported since version 44.0.
• Safari: Supported since version 12.1.

For detailed compatibility, check the Browser Compatibility Data (BCD) tables on MDN Web Docs.

Example Usage

/* Setting the color of the text decoration to red */
text-decoration-color: red;

/* Using a hexadecimal RGB value */
text-decoration-color: #00ff00;

/* Using an RGBA value with transparency */
text-decoration-color: rgba(255, 0, 0, 0.5);

/* Using an HSL value */
text-decoration-color: hsl(0, 100%, 50%);

/* Using the transparent keyword */
text-decoration-color: transparent;

/* Inheriting the value from the parent element */
text-decoration-color: inherit;

/* Resetting the property to its default value */
text-decoration-color: initial;

/* Reverting the property to the default value as defined by the user agent's stylesheet */
text-decoration-color: revert;

/* Reverting the property to the value of the next outer layer's cascade */
text-decoration-color: revert-layer;

/* Resetting the property to its natural value */
text-decoration-color: unset;

FAQs

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

The text-decoration-color property sets the color of text decorations like underlines, overlines, and line-throughs, independent of the text color.

How do I change the color of an underline to red?

Use the following CSS:

text-decoration-color: red;

Does text-decoration-color work without text-decoration?

No, text-decoration-color requires a text-decoration value (like underline or line-through) to be applied; otherwise, it has no effect.

Can I use RGBA values with text-decoration-color?

Yes, RGBA values can be used to set the text-decoration-color, allowing you to specify colors with transparency. For example:

text-decoration-color: rgba(255, 0, 0, 0.5);

How does text-decoration-color interact with pseudo-elements?

text-decoration-color can be applied to pseudo-elements like ::before and ::after if those elements have a text decoration. For example:

::before {
  content: "Example";
  text-decoration: underline;
  text-decoration-color: blue;
}

See Also

• Shorthand Property: Use the text-decoration shorthand property for setting multiple text decoration properties at once.
• Color Data Type: Explore the [<color>]WebsiteUrl data type in CSS for various ways to define colors.
• Related Properties: Check out other color-related properties like background-color, border-color, outline-color, text-emphasis-color, text-shadow, caret-color, and column-rule-color.

Additional Resources

• CSS Text Decoration Module Level 3: For the official specification, visit [here]WebsiteUrl.
• MDN Web Docs: Comprehensive documentation and examples for CSS properties, including text-decoration-color.
• WebAIM: Resources and tools for web accessibility, including the [Color Contrast Checker]WebsiteUrl.

By understanding these guidelines, you can effectively use the text-decoration-color property to enhance the visual appeal and functionality of your web content.