text-decoration-color

by

text-decoration-color specifies the color of the text decoration, which can be a line, underline, overline, or strikethrough.

Syntax

text-decoration-color: <color>;

Values

<color>: Can be any valid CSS color value, such as:

  • Named colors (e.g., red, blue, green)
  • Hexadecimal values (e.g., #FF0000, #0000FF, #008000
  • RGB values (e.g., rgb(255, 0, 0), rgb(0, 0, 255), rgb(0, 128, 0))
  • HSL values (e.g., hsl(0, 100%, 50%), hsl(240, 100%, 50%), hsl(120, 100%, 50%))
  • RGBA values (e.g., rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5), rgba(0, 128, 0, 0.5))
  • HSLA values (e.g., hsla(0, 100%, 50%, 0.5), hsla(240, 100%, 50%, 0.5), hsla(120, 100%, 50%, 0.5))
  • CurrentColor keyword (uses the current color of the element)

Example

<p>This is a paragraph with a red underline.</p>
p {
  text-decoration: underline;
  text-decoration-color: red;
}

In this example, the underline on the paragraph will be red.

Additional Notes

  • You can combine text-decoration-color with other text decoration properties like text-decoration-line and text-decoration-style to create more complex effects.
  • For more advanced text decoration, consider using CSS3’s text-shadow property.
  • If you want to apply text decoration to specific words or phrases within a paragraph, you can use the span element and target it with CSS.