A Fresh Take on Text Decoration

For as long as CSS has been pretty much around, text decoration has stayed largely the same. It’s basic in nature and very easy to use. Sadly there isn’t much room for any creativity. That is changing now that it is getting a fresh look at by the W3C.

With new properties available (or soon to be available), designers will be able to have more freedom and creativity when defining text decorations. 

Let’s go over some of these properties and their arguments which are mostly found in the CSS Text Decoration Module Level 4 (currently under draft).

text-decoration-color

This does what you expect. You can define the color of the underline separate of the text's color.

a {
  text-decoration: underline;
  text-decoration-color: red;
}

text-decoration-thickness

You are now finally able to specify the thickness of your underline. With this property (as well as the others), you no longer need to use a bottom border. There are a couple different options you can pass to this property. 

The first is auto which the UA chooses the appropriate thickness. Next is from-font. This value can be used if the not you are using specifies a preferred width. If none is found, then it behaves like auto. The last is an actual metric value. Users are strongly encouraged to use em values so it scales with the font size.

a {
  text-decoration: underline;
  text-decoration-thickness: .25em;
}

text-underline-offset

If you thought that the underline that the browser generates is too close to the text this this is the property that you want to look at. Like the last property you have auto and from-font. When you define a metric value, a positive value it pushes it away from the text, while a negative number makes it closer.

What’s totally possible is to set the value where the line goes through the text. 

a {
  text-decoration: underline;
  text-underline-offset: .5em;
}

text-decoration-skip-ink

This one doesn’t seem to be very intuitive when it comes to it’s name. First we must learn what it is actually referring to. In this case it is referring to font glyphs usually those that appear below the baseline such as g or j.

This property lets you define how the underline reacts when it meets one of these glyphs. If set to auto, it skips it (or doesn’t show the line) when it encounters these glyphs. If set to none, it ignores all glyphs and the line continues as normal.

a {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

Combining Them

Now as web designers, we have a lot more control over what our underlines can look like. Take this for example. 

a {
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-decoration-color: lightpink;
  text-underline-offset: -.2em;
  text-decoration-thickness: .15em;
  text-decoration-style: double;
}

Browser Support

Support in browsers is pretty shallow at this point. It is best to look at each property to see what is available. Chrome and Edge for the most part don't support any of this. Safari and Firefox are your best best, even though that is spotty.

Code Example