Support of :after in IE7

Question

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!

Answer 1

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