Home >Web Front-end >CSS Tutorial >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
.
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:
text-decoration-thickness
in the :hover
state.text-decoration
shorthand.text-decoration-line
instead of text-decoration
.text-decoration
StrategiesSimply 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.
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!