CSS :after pseudo element not showing up on <img>? [duplicate]

Question

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.

So, here's what i've got:

.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;   }  

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!

You can see it in action here: http://goo.gl/RupQa

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 (.trygg-ehandel-icon) is absolute positioned, so the pseudo element should show up relative to it, right?

I've been trying to fix this for over an hour now, any suggestions?

Answer 1

As answered in this question.

Using before and after psuedo-elements with the img tag does not work in most browsers, by design.

Image tags are self-closing (<tag />) tags because they contain no content. Since they do not contain any content, no generated content can be appended (::after) or prepended (::before) to the existing content.

The article linked above lists two work-around solutions. The CSS work-around is very hackish in nature, while the jQuery solution is much more elegant, but depends on both Javascript being enabled and the jQuery library being included.