Home >Web Front-end >CSS Tutorial >When to Avoid the text-decoration Shorthand Property

When to Avoid the text-decoration Shorthand Property

Jennifer Aniston
Jennifer AnistonOriginal
2025-03-14 09:17:08663browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn