content attribute of img elements

Question

While inspecting the Chrome Dev tools, I noticed the following CSS fragment:

img {
    content: url(image-src.png);
}

which works perfectly

Answer 1

The content property as defined in CSS 2.1 applies to :before and :after pseudo-elements only. By CSS rules, you can specify any property for any element, but specifications have limitations on what properties “apply to” (i.e., have effect on) various elements.

The CSS3 Generated and Replaced Content Module, a Working Draft, describes the content property as applying to all elements. It has an example of replacing the content of an h1 element by an image, and surely the same could be done to an img element.

But it’s just a Working Draft. The usual resources on CSS implementation status, QuirksMode.org CSS info and Caniuse.com, do not indicate the situation; they only describe the support to content for :before and :after (which is rather universal except IE 7 and earlier.

Answer 2

Now you can do that: http://chabada.esy.es/tests/0004.html

<style>
  .redcross {
    background: transparent url('redcross.png') no-repeat;
    display: block;
    width:  24px;
    height: 24px;
    }
</style>

<img class="redcross">