css - WebKit 错误？悬停状态不会应用于通过 CSS 插入的内容

Question

似乎有一个 WebKit 错误不会将悬停状态应用于通过 CSS 中的 content 属性插入的内容。

有人知道解决这个问题的方法吗？

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

示例:http://jsfiddle.net/wdmedal/X4gjL/1/

---

结论:这个错误似乎只影响内联元素。

解决方法:将元素的显示类型设置为inline-block(或其他显示类型)。

Answer 1

这对我有用 http://jsfiddle.net/X4gjL/5/

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

------------编辑--------

感谢BoltClock指出这一点，使它成为 inline-block 不会像 block 那样默认使宽度为 100%。 http://jsfiddle.net/X4gjL/6/

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