Why don't :before and :after pseudo elements work with `img` elements?

 

This question already has an answer here:

  • Does :before not work on img elements? 6 answers
  • CSS :after not adding content to certain elements 2 answers

    • The spec says...

    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.

    I guess this means they don't work with img elements (for now).

    Also see this answer.

    Just for testing and knowing it's not pretty you can do the following to make the pseudo elements work with 'img' elements.

    Add: display: block; content: ""; height: (height of image)px display: block; content: ""; height: (height of image)px display: block; content: ""; height: (height of image)px to the img element in your CSS.

    Though it will render your img tag empty cause of the content: "" you can then

    Add: style="background-image: url(image.jpg)" to your img element in html.

    Tested this in Fx, Chrome and Safari

    可能是浏览器供应商没有在img标签上实现伪元素，因为他们对规范的解释：严格来说， img元素不是块级元素或内联元素，它是一个空元素。

    链接地址: http://www.djcxy.com/p/88864.html

    上一篇: 在伪代码上添加CSS类

    下一篇: 为什么不：在伪元素与`img`元素一起工作之前和之后？