When to Keep away from the text-decoration Shorthand Property

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 display the usefulness of text-decoration-thickness on a easy instance. The Ubuntu net font has a reasonably thick default underline. We are able to 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 an alternative of the a ingredient 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 might be hyperlinks. Net browsers additionally use :any-link as an alternative of a of their person agent stylesheets.

Hover underlines

Many web sites, together with Google Search and Wikipedia, take away underlines from hyperlinks and solely present them when the person hovers a hyperlink. Eradicating underlines from hyperlinks in physique textual content is not a good suggestion, however it could possibly make sense in locations the place hyperlinks are extra spaced aside (navigation, footer, and so forth.). With that being mentioned, 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 take a look at the complete CSS code once more. Are you able to consider a purpose 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 aspect impact of re-initializing the opposite three textual content ornament parts (thickness, type, and coloration). 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 may 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 the intention 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 attain this. We might:

set text-decoration-thickness after text-decoration,declare the thickness within the text-decoration shorthand, oruse text-decoration-line as an alternative of text-decoration.

Selecting the perfect text-decoration possibility

Our first thought is likely to be 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 */
}

Nevertheless, 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 functional 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 appears unfamiliar to you, that may very well be as a result of the concept of utilizing text-decoration as a shorthand is comparatively new. This property was solely subsequently changed into 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 modifications. 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 info.

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

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

/* OPTION C */

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

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

Since we’re solely updating the road part of the text-decoration worth, the beforehand declared thickness stays intact. I feel that that is one of the simplest ways to implement hover underlines.

Concentrate on shorthands

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

When to Keep away from the text-decoration Shorthand Property initially revealed on CSS-Tips. You need to get the e-newsletter.