Why Don't `:before` and `:after` Pseudo-elements Work with `` Elements?

Addressing the Functionality of Pseudo Elements with Image Elements

In an attempt to enhance functionality, this question explores why pseudo elements like :before and :after do not interact with image () elements as they do with other tags such as divs and spans. To illustrate the problem, consider the following HTML and CSS:

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt=""/>

img:before {
  content: "hello";
}

Upon examining this code in browsers like Chrome 13 and Firefox 6, it becomes evident that no expected changes occur with the image element. This behavior contrasts with the compatibility exhibited by div and span elements.

Diving into the specifications, we encounter this excerpt:

Note. This specification does not fully define the interaction of ::before and ::after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

This statement suggests an incomplete definition for the interaction between pseudo elements and image elements, implying their current incompatibility. For further insights into this matter, refer to another response on this platform.

The above is the detailed content of Why Don't `:before` and `:after` Pseudo-elements Work with `` Elements?. For more information, please follow other related articles on the PHP Chinese website!