Independently Styling Underline Color

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 property¹. 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.