Why Don't Pseudo-elements Work with `` Tags in CSS?

Pseudo Elements and Image Elements: A CSS Conundrum

Despite the widespread applicability of pseudo elements like :before and :after in CSS, their functionality with image elements (<img src="/static/imghwm/default1.png" data-src="http://0.gravatar.com/avatar/this-is-not-a-hash" class="lazy" alt="Why Don't Pseudo-elements Work with `` Tags in CSS?" >) has remained a puzzling exception. As demonstrated in the code snippet below, adding pseudo elements to an img element does not produce the expected result:

<img  src="/static/imghwm/default1.png" data-src="http://0.gravatar.com/avatar/this-is-not-a-hash" class="lazy" alt="Why Don't Pseudo-elements Work with `` Tags in CSS?" >

img:before {
  content: "hello";
}

While it works seamlessly with other elements like div and span, the desired effect is absent when applied to img elements.

Behind the Scene: The CSS Specification

The CSS specification sheds light on this discrepancy. It explicitly states that the interaction between pseudo elements and replaced elements, including img in HTML, is not fully defined in the current version. This implies that the current specification does not specify the behavior of pseudo elements with img elements.

Potential Solution: Awaiting Standardization

However, this situation may not persist indefinitely. The specification suggests that the interaction between pseudo elements and replaced elements will be further defined in a future version. This leaves us with the expectation that pseudo elements will eventually be supported for img elements in a more comprehensive and consistent manner.

Until then, developers looking to achieve similar effects using img elements may need to consider alternative approaches, such as using JavaScript or creating an additional wrapper element around the img.

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