More Control over Text Decoration

Marie Mosley just finished up a revamping of the text-decoration property (and friends) in the Almanac. You’re probably aware of this property. For instance, most default browser styles include underlined links by way of text-decoration: underline; – which you can remove with text-decoration: none;.

But you may not be aware that there is more you can do with this property, as well as various sub-properties offering more fine-grained control.

Text can have multiple decorations

Like:

a {
  text-decoration: underline overline;
}

See the text-decoration entry in the Almanac. More specifically, this is adding multiple values to the text-decoration-line subproperty.

You can change the color of the decoration

The default for the color of the decoration lines is the same as the color of the text. But you can change that:

a {
  text-decoration-color: #f06d06;
}

Check out the text-decoration-color entry in the Almanac.

Note that Gecko renders the underline behind descenders while WebKit/Blink render on top:

A common way of handling colored underlines has generally been to use a border instead of text-decoration. Borders can have individually controlled colors, thicknesses, and position a bit better than text-decoration can pull off.

But there are some things borders can’t do, like…

You can change the style of the decoration

Can’t make a border do this!

a {
  text-decoration-style: wavy;
}

Check out the text-decoration-style entry in the Almanac.

It’s going to get even fancier

There has been some clear desire for better underlined text. For instance, skipping the descenders for better readability, as noted in that post:

That’s going to be controlled by text-decoration-skip, although not yet implemented anywhere. In the meantime, setting an underline to a more relaxed, less contrast-y color might help. Here’s rgba() in use:

And skipping descenders is just one ability it’s likely to have. You’ll be able to skip certain inline elements, whitespace, and control the edges.

Note that Safari/iOS seems to skip descenders by default.

If you want to turn this off, -webkit-text-decoration-skip: none; works.

Playground

Due to varied levels of browser support, some (or all) of this demo may not work in your browser.

See the Pen text-decoration-style by CSS-Tricks (@css-tricks) on CodePen.

So yeah! Even simple stuff like this (that we sometimes take for granted) changes over time in CSS land.