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"><a href="xc_debating.htm">Debating</a></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"><a href="xc_debating.htm">Debating</a></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;
}​