I am using :after and :before CSS pseudo elements and it is working fine in Internet Explorer 8, and all modern browsers but it is not working fine in Internet Explorer 7. Are there known hacks to work around this in Internet Explorer 7?
with any pure CSS hack it's not possible.
Use IE8.js http://code.google.com/p/ie7-js/
It has support for this. http://ie7-js.googlecode.com/svn/test/index.html
test page also there
after - http://ie7-js.googlecode.com/svn/test/after.html
before - http://ie7-js.googlecode.com/svn/test/before.html
Edit after 1st comment
You can just keep this js for IE6 and 7. other browser will not read it.
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
And if you are already using jQuery in your project than you can use this plugin
jQuery Pseudo Plugin