Why Doesn't Text Decoration Inherit Correctly in CSS?

CSS Text Decoration Override Issue

In the CSS property hierarchy, specific properties take precedence over inherited properties from parent elements. However, the text-decoration property exhibits an exception to this rule.

Problem:

Consider the following code:

<a href="#">
  A <span>red</span> anchor
</a>

a {
  color: blue;
  font-family: Times New Roman;
  text-decoration: underline;
}

span {
  color: red;
  font-family: Arial;
  text-decoration: none;
}

As demonstrated in this [demo](http://jsfiddle.net/5t9sV/), the text-decoration property of the child element span doesn't override the underline decoration from the parent a element.

Reason:

According to the CSS specification, the text-decoration property of descendant elements "cannot have any effect on the decoration of the ancestor." This essentially means that text decorations are applied across the entire element, regardless of any child elements present.

Solution:

In CSS3, there's a property called text-decoration-skip that can be applied to the child element to skip the inherited text decoration. However, it only works for inline elements (e.g., span) and the supported browsers may vary.

For example, to make the text inside the span element appear without an underline, you can add:

span {
  text-decoration-skip: ink;
}

Note that ink is one of the possible values for text-decoration-skip, which includes characters, spaces, and embedded objects.

The above is the detailed content of Why Doesn't Text Decoration Inherit Correctly in CSS?. For more information, please follow other related articles on the PHP Chinese website!