combining pseudo-classes and pseudo-elements failure

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Here is the markup: 
<ul id="menu">
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
</ul> 
2. Trying to apply these css rules:
#menu li:hover a:before {...}
#menu li:hover a:after {...}

What is the expected output? What do you see instead?
I expected to see custom <a> appearance when cursor is over <li>.
The css code is valid and correct so it works in FF, Opera, Safari, Chrome
and IE8. But the css code doesn't work in IE7 & IE6

What version of the product are you using? On what operating system?
2.0(beta3) IE8.js
Windows XP SP2, IE7 installed natively, IE Tester 0.2.3 to emulate IE6 & IE8

Please provide any additional information below.

Original issue reported on code.google.com by m.psheni...@gmail.com on 12 Jan 2009 at 11:48

[GoogleCodeExporter]

This is a known problem. It's tricky to fix and may have to wait for a later 
release.

Original comment by dean.edw...@gmail.com on 12 Feb 2010 at 2:20

• Changed state: Accepted

[GoogleCodeExporter]

I don't know if this is the same issue, so I'll mention it here instead of a 
new bug

#menu li:after { content: ', ' }
#menu li:last-child:after { content: ''; }

works in IE6 and IE7 but not IE8 even when using IE9.js

Original comment by jonbarn...@gmail.com on 2 Aug 2010 at 2:12

[GoogleCodeExporter]

#menu li:after { content: ', ' }
#menu li:last-child:after { display: none; }

WORKS in IE6 and IE7, DOES NOT WORK in IE8

#menu li:before { content: ', ' }
#menu li:first-child:before { display: none; }

WORKS in all 3

Original comment by jonbarn...@gmail.com on 2 Aug 2010 at 2:29

[GoogleCodeExporter]

This seems to be similar to #267.

Original comment by grantmal...@gmail.com on 14 Oct 2010 at 8:21