title: Why don't :before and :after pseudo elements work with `img` elements?
body: <p>I am trying to use a <a href="http://www.w3.org/TR/CSS2/generate.html#before-after-content" rel="noreferrer"><code>:before</code> pseudo element</a> with an <code>img</code> element.</p>
  <p>Consider this HTML and CSS...</p>
  <h3>HTML</h3>
  <pre><code>&lt;img src=&quot;http://0.gravatar.com/avatar/this-is-not-a-hash&quot; alt=&quot;&quot; /&gt;
  </code></pre>
  <h3>CSS</h3>
  <pre><code>img:before {
    content: &quot;hello&quot;;
  }
  </code></pre>
  <p><a href="http://jsfiddle.net/LPt7m/" rel="noreferrer">jsFiddle</a>.</p>
  <p>This does not produce the desired effect (tested in Chrome 13 and Firefox 6). However, it works with a <code>div</code> or <code>span</code> element.</p>
  <p>Why not?</p>
  <p>Is there a way to make pseudo elements work with <code>img</code> elements?</p>