:before and :after doesn't work with pseudo-classes (:hover and :active)

What steps will reproduce the problem?
1. Add a css rule using pseudo-classes (:hover, :active) and :before or :after, 
for example:
.button.blue:hover:after {
    background-position: -60px -41px;
}

What is the expected output? 
The css rule applied when the pesudo-class is active

What do you see instead?
The rule is not applied, and also, there are problems with the possition of 
some elements

What version of the product are you using? On what operating system?
IE8.js the las version, loaded with:
<!--[if lt IE 8]>
<script 
src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

OS: Windows 7 x64

Please provide any additional information below.

Here is a screen capture of the problem:
http://www.imagengratis.org/images/ie7bug.jpg
(also attached)

And here is the live example:
http://www.enriquepiatti.com/tests/testIE7_before_after.html
(also attached)

Original issue reported on code.google.com by enrique....@gmail.com on 15 Apr 2011 at 12:10

Attachments:

ie7_before_after_bug.ZIP

toothbrush7777777 / ie7-js

:before and :after doesn't work with pseudo-classes (:hover and :active) #320