Question

There appears to be a WebKit bug that does not apply a hover state to content inserted via the content property in CSS.

Does anyone know a workaround for this?

a:before {
    content: "Hover Over Me";
}
a:hover {
    color: red;
}

Example: http://jsfiddle.net/wdmedal/X4gjL/1/

---

Conclusion: This bug seems to only affect inline elements.

Workaround: Set the display type of the element to inline-block (or another display type).

Answer 1

This works for me http://jsfiddle.net/X4gjL/5/

a:before {
    content: "Hover Over Me";
}
a.foo:hover {
    color: red;
}
a.foo
{
    display:block;
}​

————-EDIT———

Thanks to BoltClock for pointing this out, making it inline-block doesn’t make the width 100% by default like block. http://jsfiddle.net/X4gjL/6/

a:before {
    content: "Hover Over Me";
}
a.foo:hover {
    color: red;
}
a.foo
{
    display:inline-block;
}​