Showing Div Attributes for Debugging

I was just playing with a site and couldn’t debug why it was looking weird in IE. So I pondered that it would be helpful to know where and how the elements are showing up. I usually add this line of CSS to help me identify what is breaking or different in a layout.
div:hover {border:1px solid red;}
Using that line, I can hover over elements and see how the site lays out. This wasn’t helping me to much. So I then wrote this up.
div:before {
content: " [" attr(id)"] (" attr(class) ")";
position:absolute;
border:1px solid gray;
background:silver;
color: black;
padding:.5em;
font-size:smaller;
z-index:99;
margin:0em;
}
div div:before {
margin:2em;
}
div div div:before {
margin:5em;
}
The idea was, to show the div elements ID’s and Classes. Combing the two would be pretty helpful, with the exception that I am using IE7 and the :before pseudo class doesn’t work in IE7. I’m hoping that it works in IE8 and will help for future debugging on IE. For Firefox, there are plenty of plugins to help with this kind of issue, but not on IE that I am aware of.