Why Can\'t I Hide a Pseudo-Element Using Sibling Combinators and How Can I Achieve This?

Targeting Pseudo-Elements with Sibling Combinators

In an attempt to conceal a pseudo-element generated after specific anchor tags yet avoid those wrapping images, the following CSS was implemented:

a[href^="http"]:after {
    /* Styling for the pseudo-element */
}

a[href^="http"] img ~ :after {
    display: none;
}

However, this approach failed on the following HTML:

<a href="http://google.com">Test</a>
<a href="http://google.com">
    <img src="https://www.google.com/logos/classicplus.png">
</a>

Why does this attempt fail?

Answer:

Targeting a pseudo-element (:after) with a sibling combinator (|) is not possible because the pseudo-element's content is not rendered in the DOM and does not manipulate it. Therefore, CSS cannot modify the DOM to hide the pseudo-element based on the presence of a sibling image. As stated in the CSS2 specification:

"Generated content does not alter the document tree."

To resolve this issue, you can consider using JavaScript to dynamically hide the pseudo-element based on the presence of a sibling image.

The above is the detailed content of Why Can\'t I Hide a Pseudo-Element Using Sibling Combinators and How Can I Achieve This?. For more information, please follow other related articles on the PHP Chinese website!