More Control over Text Decoration
Published by
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.
-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.
Interesting quirky bug I recently discovered:
By default, underlines pass through all child content (you can’t turn them off by changing the
text-decorationproperty) except for inline blocks.You would think “inline block” would include an inline SVG. But the default display mode for inline SVG is just
display: inline. Most browsers will underline every letter in your SVG icon if you include it within a heading or link that has underlining. Internet Explorer is for once the sensible browser, and does not do this. For the others, you have to set your icon todisplay: inline-block.(And if you’re wondering: I discovered this while creating little “PDF” icons to be inserted after links to PDF documents. I wanted the icons to be inside the links, so that the color would match, but the underlining was uuuugly!)
Interesting Information. It’s awesome. Thanks.