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.
Twitter Facebook Google+
