How Does CSS Text Decoration Inheritance Work with Child Elements?

CSS text-decoration Property Override Issues

In HTML and CSS, the text-decoration property is used to add or remove decorations, such as underlining or strikethroughs, to text elements. However, when a child element contains its own text-decoration property, the issue arises of whether the child property can override the property inherited from the parent.

Consider this CSS example:

a {
    text-decoration: underline;
}

span {
    text-decoration: none;
}

In this case, the element does not inherit the text-decoration property from the parent and instead applies its own text-decoration: none; value. This result is expected because the text-decoration property has been specified on both the parent and child elements.

According to the CSS text-decoration specification, the text-decoration property on child elements cannot have any effect on the decoration of the ancestor. This means that the parent element's text decoration will always be applied, regardless of the child's value.

The linked question also provides further information from the specification, stating that "Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence." This implies that the text decoration of the parent will always be applied over the entire inline box, including any child elements.

In later CSS versions (after 2.1), the text-decoration-skip property was introduced to address this issue. By setting text-decoration-skip: skip on the child element, it can force the parent's decoration to skip over the child's content.

In conclusion, the text-decoration property cannot be overridden by child elements due to the specification's design. To control text decoration on specific parts of an element, the text-decoration-skip property can be used in later CSS versions.

The above is the detailed content of How Does CSS Text Decoration Inheritance Work with Child Elements?. For more information, please follow other related articles on the PHP Chinese website!