title: CSS :after pseudo element not showing up on <img>?
body: <p>I have an image that kind of slides up from the menu when you hover it. Because it's hidden under the menu i want to give the bottom of the image a little bit of deph by adding a dark fade to the bottom. I figured the best way to achieve this is to use pseudo elements. I don't really care much about IE support as it's such a small detail.</p>
  
  <p>So, here's what i've got:</p>
  
  <pre><code>.header-section .trygg-ehandel-icon {
      position: absolute;
      top: 45px;
      right: 280px;
      z-index: 0;
      display: block;
      // Stripped out some transition style here
    }
  
    // Here's where the cool stuff begins!
    .header-section .trygg-ehandel-icon::after {
      position: absolute;
      top: 0px; left: 0px;
      height: 20px; width: 20px;
      display: block;
      content: '.';
      z-index: -999999px;
      background: red;
    } 
  </code></pre>
  
  <p>First off, i'm unsure whether to use double or single colons before "after". I've always used one but recently i noticed people using two, so what's the way to go? Either seems to work!</p>
  
  <p>You can see it in action here: <a href="http://goo.gl/RupQa" rel="noreferrer">http://goo.gl/RupQa</a></p>
  
  <p>It's the yellow logo popping up above the header menu. Why am i not seeing a 20x20 red box above the image? The parent (<code>.trygg-ehandel-icon</code>) is absolute positioned, so the pseudo element should show up relative to it, right?</p>
  
  <p>I've been trying to fix this for over an hour now, any suggestions?</p>