1

Long story short, I want to add an absolutely positioned pseudo element after another element, so I simply use the :after pseudo element in my stylesheet. This works like a charm, except in IE7. I should think that :after is supported in IE7, no? The clearfix hack used in Boilerplate works fine, so why not in my example?

When I look at the CSS in the style inspector, it does seem to print it out, so it seems to me that it understands it, but I can't see the generated element nonetheless. Am I missing something?

.myclass:after { 
   content:"";
   display:table;
   width:100px;
   height:100px;
   background:#f7f7f7;
   position:absolute;
   top:0;
   left:-1px;
   z-index:0; }
.myclass > div {
   position:relative;
   z-index:10; }   
.myclass { 
   z-index:1;
   position:relative; }

Here's a Fiddle!

Nix
  • 5,746
  • 4
  • 30
  • 51
  • 1
    [Here is the same question with the answer][1] [1]: http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7 – FlashTrava Jan 17 '12 at 13:01

1 Answers1

3

There is no support for :before and :after in IE7, there are other options that you can use like IE8.js.

Andres I Perez
  • 75,075
  • 21
  • 157
  • 138
  • That's a pretty heavy script to load, just for this. I just find it strange, that the clearfix hack works fine, then. – Nix Jan 17 '12 at 13:05
  • @Nix Which is strange because not even in the microsoft site it is stated that it is supported in IE7, http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx#pseudoelements – Andres I Perez Jan 17 '12 at 13:15
  • @Nix just took a look at the clearfix hack you mentioned, this is why its working in IE > `/* For IE 6/7 (trigger hasLayout) */ .cf { zoom:1; }` – Andres I Perez Jan 17 '12 at 13:20
  • Well, yes, but I thought that is to fix the hasLayout bug specifically? I'm not sure why the clearfix should work otherwise, I just assumed something was bundled with Boilerplate (like Html5shiv or Modernizr) made it work. The IE8.js completely messes up my layout, however, so I'm just going to add the element manually. *sigh* Thanks anyway. – Nix Jan 17 '12 at 13:29