CSS Style textDecorationColor Property: CSS Text Decoration Color

Table of Contents

CSS Style `text-decoration-color` Property: A Comprehensive Guide

The text-decoration-color property in CSS allows you to specify the color of the text decoration (underline, overline, line-through) applied to an element’s text. This property enhances the visual styling and customization of text decorations, making them more aligned with your design aesthetics.

What is the `text-decoration-color` Property?

The text-decoration-color property sets the color of the line used in text decorations. By default, the text decoration color matches the text color. Using text-decoration-color, you can make the decoration stand out or blend in, offering greater design flexibility.

Purpose of the `text-decoration-color` Property

The primary purpose of the text-decoration-color property is to:

Customize the color of text decorations to match the design theme.
Create visually appealing and distinct text styles.
Improve readability by contrasting the decoration color with the text color.
Add emphasis or subtle accents to text elements.

Syntax and Values

The text-decoration-color property accepts standard CSS color values.

Syntax

text-decoration-color: color;

Values

Value	Description
`color`	Specifies the color of the text decoration. Accepts any valid CSS color value (e.g., `red`, `#00ff00`, `rgb(255, 0, 0)`, `hsl(120, 100%, 50%)`).
`currentcolor`	Specifies that the text decoration color should be the same as the current element’s text color.
`transparent`	Specifies a transparent text decoration color.
`inherit`	Specifies that the property should inherit its value from its parent element.

Examples

Let’s explore practical examples of using the text-decoration-color property to style text decorations effectively.

Basic Example: Setting a Specific Color

In this example, we’ll set the color of the underline to red.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .underline-red {
        text-decoration: underline;
        text-decoration-color: red;
      }
    </style>
  </head>
  <body>
    <p class="underline-red">This text has a red underline.</p>
  </body>
</html>

The text “This text has a red underline.” will be displayed with a red underline.

Using Hexadecimal Color Values

Here, we use a hexadecimal color value to set the text decoration color.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .underline-hex {
        text-decoration: underline;
        text-decoration-color: #007bff;
      }
    </style>
  </head>
  <body>
    <p class="underline-hex">This text has a blue underline.</p>
  </body>
</html>

The text “This text has a blue underline.” will have a blue underline (specifically #007bff).

Applying `text-decoration-color` to Links

This example demonstrates how to style the underline color of a hyperlink.

<!DOCTYPE html>
<html>
  <head>
    <style>
      a {
        text-decoration: underline;
        text-decoration-color: green;
      }
    </style>
  </head>
  <body>
    <a href="#">This link has a green underline.</a>
  </body>
</html>

The link “This link has a green underline.” will be displayed with a green underline.

Using `currentcolor`

The currentcolor value allows the text decoration color to match the text color.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .current-color {
        color: purple;
        text-decoration: underline;
        text-decoration-color: currentcolor;
      }
    </style>
  </head>
  <body>
    <p class="current-color">
      This text has an underline that matches its purple color.
    </p>
  </body>
</html>

The text “This text has an underline that matches its purple color.” will have a purple underline.

Combining `text-decoration-color` with Other Decoration Properties

You can combine text-decoration-color with other text-decoration properties for more complex styling.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .fancy-decoration {
        text-decoration: overline wavy;
        text-decoration-color: orange;
      }
    </style>
  </head>
  <body>
    <p class="fancy-decoration">
      This text has a wavy orange overline.
    </p>
  </body>
</html>

The text “This text has a wavy orange overline.” will be displayed with a wavy orange line above it.

Using `transparent`

Setting the text-decoration-color to transparent makes the decoration invisible.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .transparent-decoration {
        text-decoration: underline;
        text-decoration-color: transparent;
      }
    </style>
  </head>
  <body>
    <p class="transparent-decoration">This text has a transparent underline.</p>
  </body>
</html>

Although the text “This text has a transparent underline.” has an underline, it will not be visible.

Complex Example: Dynamic Highlighting

Create a dynamic highlighting effect using JavaScript to change the text-decoration-color on hover.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .highlight-text {
        text-decoration: underline;
        text-decoration-color: transparent;
        transition: text-decoration-color 0.3s ease;
      }

      .highlight-text:hover {
        text-decoration-color: rgba(255, 255, 0, 0.7);
      }
    </style>
  </head>
  <body>
    <p class="highlight-text">
      Hover over this text to see the dynamic highlight.
    </p>
  </body>
</html>

When you hover over the text “Hover over this text to see the dynamic highlight.”, the underline will appear in a semi-transparent yellow color, creating a dynamic highlighting effect.

Browser Support

The text-decoration-color property is widely supported across modern web browsers:

Chrome
Edge
Firefox
Safari
Opera

Ensure to test your implementations across different browsers to provide a consistent user experience. 🧐

Tips and Notes

Readability: Ensure the text-decoration-color contrasts well with the text and background for better readability.
Accessibility: Use color combinations that meet accessibility standards to accommodate users with visual impairments.
Consistency: Maintain a consistent color scheme throughout your website for a cohesive design.
Specificity: Be mindful of CSS specificity when applying text-decoration-color to ensure your styles are applied correctly.
Combination: Combine with text-decoration-line and text-decoration-style for richer text effects.

Conclusion

The text-decoration-color property offers a simple yet powerful way to customize text decorations in CSS. By understanding its syntax, values, and practical applications, you can create visually appealing and engaging text styles that enhance the overall design of your website. Whether you’re aiming to add subtle accents or create dynamic effects, mastering text-decoration-color will significantly improve your styling capabilities. Happy styling!