Quick CSS: text-decoration

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) with text-decoration-thickness (MDN) and text-underline-offset (MDN)
• Use the :any-link (MDN) to select links that actually have an href 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 whitespace
• text-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.

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.