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
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
text-decoration: underline overline;
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:
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!
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.
Due to varied levels of browser support, some (or all) of this demo may not work in your browser.
So yeah! Even simple stuff like this (that we sometimes take for granted) changes over time in CSS land.