Why is "content" buggy in webkit browsers? - css

Question

I wanted to replace text on hover with css and though it didn't work, Google chrome ignored the entire :hover pseudo-class, while Mozilla firefox safely ignored content and continued to run the rest of the events
Html:
<li id="menuDebating">Debating</li>​
Css:
#menuDebating a:hover{
content: "Public Speaking" !important;
color:red;
}​
Fiddle: http://jsfiddle.net/FSyAv/
However I have read the css3 declaration and I know that content should not work for :hover, which isn't a big deal since implementation is easy with javascript.
But, I then looked at it further and tried using the a:hover::before psuedo-class and that's where it gets really strange
Html:
<li id="menuDebating">Debating</li>
Css:
#menuDebating a:hover::before{
content: "Public Speaking" !important;
color:red;
}
Fiddle: http://jsfiddle.net/FSyAv/1/
In Chrome, it flickers non-stop, Safari flickers, then stops for while and continues flickering, while Mozilla and Opera runs the event as intended

Answer 1

content can only be used with pseudo elements (before and after).
You can force it to "overwrite" the original word by setting its position to absolute:
Demo
ul li {
position:relative;
}
#menuDebating a:hover:before{
position:absolute;
top:0; left:0; right:0; bottom:0;
content: "Public Speaking";
color:red;
background:#FFF;
}​