title: :before and :after multiple border/background trick on images?
body: <p>I've been using the :before or :after CSS trick (explained in this article: <a href="http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-multiple-borders-with-simple-css/" rel="nofollow noreferrer">http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-multiple-borders-with-simple-css/</a>) to achieve multiple borders and backgrounds. It works great on <code>div</code> elements but I noticed it doesn't work on images at all.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>.author img {
      position: absolute;
      left: 10px;
      background-color: #fff;
      padding: 3px;
      border: 1px solid #d0d0d0;
      width: 48px;
  }
  
  .author img:before {
      content: '';
      display: block;
      width: 80px;
      height: 16px;
      position: absolute;
      top: -17px; left: 0;
      background: red;
  }
  </code></pre>
  
  <p>Is there a way to use this trick on images or will I have to wrap my images in an additional div?</p>