Styling Underline Color
If you’ve ever wanted to set the color of the underline for underlined text separately from the text color, you may have come across the CSS property
text-decoration-color. Unfortunately, this property is not yet fully supported by all browser vendors. At the time of this article being written, only Chrome and Opera fully support the property1. Fortunately, there’s a quick and easy work-around that involves wrapping the underlined content in a
Here’s a simple snippet for independently styling text and underline color. Note that the color property of the
span element controls the color of the text — in this case the
h1 element — while the
color property styles the underline color.
I’ll add some additional styles to help style our overall document, but this is ancillary.