title: Does :before not work on img elements?
body: <p>I'm trying to use the <code>:before</code> selector to place an image over another image, but I'm finding that it simply doesn't work to place an image before an <code>img</code> element, only some other element.  Specifically, my styles are:</p>
  
  <pre><code>.container
  {
     position: relative;
     display: block;
  }
  
  .overlay:before
  {
      content: url(images/[someimage].png);
      position: absolute;
      left:-20px;
      top: -20px;
  }
  </code></pre>
  
  <p>and I find that this works fine:</p>
  
  <pre><code>&lt;a href="[url]" class="container"&gt;
    &lt;span class="overlay"/&gt;
    &lt;img width="200" src="[url]"/&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>but this does not:</p>
  
  <pre><code>&lt;a href="[url]" class="container"&gt;
    &lt;img width="200" src="[url]" class="overlay"/&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I can use a <code>div</code> or <code>p</code> element instead of that <code>span</code>, and the browser correctly overlays my image over the image in the <code>img</code> element, but if I apply the overlay class to the <code>img</code> itself, it doesn't work.</p>
  
  <p>I'd like to get this working because that extra <code>span</code> offends me, but more importantly, I've got about 100 blog posts that I'd like to modify, and I can do this in one go if I could just modify the stylesheet, but if I have to go back and add an extra <code>span</code> element in between the <code>a</code> and <code>img</code> elements, this will be a lot more work.  </p>