Quick CSS: text-decoration
Published by marco on
The article When to Avoid the text-decoration Shorthand Property by Šime Vidas (CSS Tricks) makes a couple of interesting points. Basically, you have a lot of control over how underlines are drawn on text.
- Modern browsers allow you to tweak the
text-decoration: underline
(MDN) withtext-decoration-thickness
(MDN) andtext-underline-offset
(MDN) - Use the
:any-link
(MDN) to select links that actually have anhref
attribute rather than selecting all links. - The CSS property
text-decoration
is a shorthand property, which means that setting it overwrites all of the properties that it might represent (including the underline thickness). (MDN)
The article doesn’t mention these, but,
text-decoration-skip
(MDN) controls how to underline whitespacetext-decoration-skip-ink
(MDN) controls whether a text decoration (underline or overline) can touch the ascenders or descenders of glyphs.
The following text has the style text-decoration: underline .4em; text-underline-offset: .4em
. Note that it doesn’t affect the bounding box.
squabbling
The following text has the style text-decoration: underline; text-decoration-skip: spaces; text-decoration-skip-ink: all
. Note that text-decoration-skip
only works with Safari at the time of writing.
squabbling with boggling