The article <a href="https://css-tricks.com/when-to-avoid-css-text-decoration-shorthand/" author="Šime Vidas" source="CSS Tricks">When to Avoid the text-decoration Shorthand Property</a> makes a couple of interesting points. Basically, you have a <i>lot</i> of control over how underlines are drawn on text. <ul> Modern browsers allow you to tweak the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration" source="MDN"><c>text-decoration: underline</c></a> with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness" source="MDN"><c>text-decoration-thickness</c></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset" source="MDN"><c>text-underline-offset</c></a> Use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link" source="MDN"><c>:any-link</c></a> to select links that actually have an <c>href</c> attribute rather than selecting <i>all</i> links. The CSS property <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration" source="MDN"><c>text-decoration</c> is a <cite>shorthand</cite> property, which means that setting it overwrites all of the properties that it might represent (including the underline thickness).</a> </ul> The article doesn't mention these, but, <ul> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip" source="MDN"><c>text-decoration-skip</c></a> controls how to underline whitespace <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink" source="MDN"><c>text-decoration-skip-ink</c></a> controls whether a text decoration (underline or overline) can touch the ascenders or descenders of glyphs. </ul> The following text has the style <c>text-decoration: underline .4em; text-underline-offset: .4em</c>. Note that it doesn't affect the bounding box. <info style="text-decoration: underline .4em; text-underline-offset: .4em">squabbling</info> The following text has the style <c>text-decoration: underline; text-decoration-skip: spaces; text-decoration-skip-ink: all</c>. Note that <c>text-decoration-skip</c> only works with Safari at the time of writing. <info style="text-decoration: underline; text-decoration-skip: spaces; text-decoration-skip-ink: all">squabbling with boggling</info>