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!
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.