In my current article about CSS underline bugs in Chrome, I mentioned text-decoration-thickness and text-underline-offset, two comparatively new and widely-supported CSS properties that give us extra management over the styling of underlines.

Let me exhibit the usefulness of text-decoration-thickness on a easy instance. The Ubuntu net font has a reasonably thick default underline. We will make this underline thinner like so:

:any-link {
  text-decoration-thickness: 0.08em;
}

/clarification All through this text, I’ll use the :any-link selector as a substitute of the a factor to match hyperlinks. The issue with the a tag as a selector is that it matches all <a> components, even those that don’t have a href attribute and thus aren’t hyperlinks. The :any-link selector solely matches <a> components which can be hyperlinks. Net browsers additionally use :any-link as a substitute of a of their consumer agent stylesheets.

Hover underlines

Many web sites, together with Google Search and Wikipedia, take away underlines from hyperlinks and solely present them when the consumer hovers a hyperlink. Eradicating underlines from hyperlinks in physique textual content is not a good suggestion, however it may well make sense in locations the place hyperlinks are extra spaced aside (navigation, footer, and so forth.). With that being stated, right here’s a easy implementation of hover underlines for hyperlinks within the web site’s header:

header :any-link {
  text-decoration: none;
}

header :any-link:hover {
  text-decoration: underline;
}

However there’s an issue. If we examined this code in a browser, we’d discover that the underlines within the header have the default thickness, not the thinner type that we declared earlier. Why did text-decoration-thickness cease working after we added hover underlines?

Let’s have a look at the total CSS code once more. Are you able to consider a cause why the customized thickness doesn’t apply to the hover underline?

:any-link {
  text-decoration-thickness: 0.08em;
}

header :any-link {
  text-decoration: none;
}

header :any-link:hover {
  text-decoration: underline;
}

The rationale for this conduct is that text-decoration is a shorthand property and text-decoration-thickness its related longhand property. Setting text-decoration to none or underline has the facet impact of re-initializing the opposite three textual content ornament elements (thickness, type, and colour). That is outlined within the CSS Textual content Ornament module:

The text-decoration property is a shorthand for setting text-decoration-line, text-decoration-thickness, text-decoration-style, and text-decoration-color in a single declaration. Omitted values are set to their preliminary values.

You possibly can verify this within the browser’s DevTools by deciding on one of many hyperlinks within the DOM inspector after which increasing the text-decoration property within the CSS pane.

With a purpose to get text-decoration-thickness to work on hover underlines, we’ll need to make a small change to the above CSS code. There are literally a number of methods to realize this. We may:

• set text-decoration-thickness after text-decoration,
• declare the thickness within the text-decoration shorthand, or
• use text-decoration-line as a substitute of text-decoration.

Selecting the perfect text-decoration possibility

Our first thought is perhaps to easily repeat the text-decoration-thickness declaration within the :hover state. It’s a fast and easy repair that certainly works.

/* OPTION A */

header :any-link {
  text-decoration: none;
}

header :any-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.08em; /* set thickness once more */
}

Nonetheless, since text-decoration is a shorthand and text-decoration-thickness is its related longhand, there actually needs to be no want to make use of each on the similar time. As a shorthand, text-decoration permits setting each the underline itself and the underline’s thickness, multi function declaration.

/* OPTION B */

header :any-link {
  text-decoration: none;
}

header :any-link:hover {
  text-decoration: underline 0.08em; /* set each line and thickness */
}

If this code seems unfamiliar to you, that could possibly be as a result of the concept of utilizing text-decoration as a shorthand is comparatively new. This property was solely subsequently become a shorthand within the CSS Textual content Ornament module. Within the days of CSS 2, text-decoration was a easy property.

Sadly, Safari nonetheless hasn’t totally caught up with these adjustments. Within the WebKit browser engine, the shorthand variant of text-decoration stays prefixed (-webkit-text-decoration), and it doesn’t assist thickness values but. See WebKit bug 230083 for extra data.

This guidelines out the text-decoration shorthand syntax. The above code received’t work in Safari, even when we added the -webkit- prefix. Fortunately, there’s one other technique to keep away from repeating the text-decoration-thickness declaration.

When text-decoration was become a shorthand, a brand new text-decoration-line longhand was launched to take over its outdated job. We will use this property to cover and present the underline with out affecting the opposite three textual content ornament elements.

/* OPTION C */

header :any-link {
  text-decoration-line: none;
}

header :any-link:hover {
  text-decoration-line: underline;
}

Since we’re solely updating the line part of the text-decoration worth, the beforehand declared thickness stays intact. I believe that that is the easiest way to implement hover underlines.

Concentrate on shorthands

Take into account that if you set a shorthand property, e.g., text-decoration: underline, any lacking components within the worth are re-initialized. That is additionally why kinds comparable to background-repeat: no-repeat are undone in case you set background: url(flower.jpg) afterwards. See the article “Unintentional CSS Resets” for extra examples of this conduct.