
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 span
.
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 h1
element’s color
property styles the underline color.
<h1><span>Different colored text and underlining</span></h1>
h1 {
color: #F02A71; // underline color
font-size: 52px;
margin-bottom: 4em;
text-decoration: underline;
span {
color: #14103B; // text color
}
}
I’ll add some additional styles to help style our overall document, but this is ancillary.
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
body {
align-items: center;
background-color: #F9F8ED;
display: flex;
font-family: 'Fjalla One', sans-serif;
height: 100vh;
justify-content: center;
text-align: center;
text-transform: uppercase;
}
See it in Action
See the Pen Different Color Underlined Text by Christopher Murphy (@Splode) on CodePen.