When to Avoid the text-decoration Shorthand Property

My recent article on Chrome's CSS underline issues highlighted text-decoration-thickness and text-underline-offset, powerful, widely-supported CSS properties offering finer underline control.

Let's illustrate text-decoration-thickness. Ubuntu's default underline is quite thick. We can refine it:

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

Note: I use :any-link instead of <a></a> to target only actual hyperlinks (those with href attributes). Browsers' user agent stylesheets also favor :any-link.

Hover Underlines: A Subtle Pitfall

Many sites (like Google Search and Wikipedia) employ hover underlines—underlines appear only on mouseover. While generally inadvisable for in-text links, this approach suits spaced-out links (navigation, footers). Here's a header example:

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

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

However, the hover underline reverts to the default thickness, ignoring our earlier text-decoration-thickness setting. Why?

The issue stems from text-decoration being a shorthand property, and text-decoration-thickness its longhand counterpart. Setting text-decoration to none or underline resets other text decoration components (thickness, style, color). The CSS Text Decoration module specifies this: omitted values revert to their initial states.

Browser DevTools confirm this: inspect a hyperlink, expand the text-decoration property to see the component values.

To retain custom thickness on hover, we need adjustments. Several solutions exist:

• Re-declare text-decoration-thickness in the :hover state.
• Incorporate thickness directly into the text-decoration shorthand.
• Utilize text-decoration-line instead of text-decoration.

Optimal text-decoration Strategies

Simply repeating text-decoration-thickness in the :hover state works, but it's redundant:

/* OPTION A */
header :any-link {
  text-decoration: none;
}

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

Ideally, leverage text-decoration's shorthand capabilities:

/* OPTION B */
header :any-link {
  text-decoration: none;
}

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

Note: This shorthand approach is relatively new; older CSS versions lacked this functionality. Safari's WebKit engine still uses the prefixed -webkit-text-decoration and lacks thickness support (see WebKit bug 230083). This renders Option B Safari-incompatible.

The best approach uses text-decoration-line, introduced alongside the shorthand:

/* OPTION C */
header :any-link {
  text-decoration-line: none;
}

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

This modifies only the line component, preserving the previously set thickness. This is the most robust and cross-browser compatible solution.

Shorthand Property Considerations

Remember: shorthand properties (like text-decoration, background) reset omitted values to their defaults. This explains why styles like background-repeat: no-repeat are overridden by a subsequent background: url(flower.jpg) declaration. See "Accidental CSS Resets" for more details.

The above is the detailed content of When to Avoid the text-decoration Shorthand Property. For more information, please follow other related articles on the PHP Chinese website!