简单的css:之前:悬停不起作用？CSSlint没有错误？

Question

http://jsfiddle.net/nicktheandroid/k93ZK/2/

这应该很简单,我只是不明白为什么它不起作用.当将鼠标悬停在:before它上面时,应将其不透明度更改为1,但事实并非如此.为什么？

p {
    padding-top:15px;
    position:relative;
}

p:before {
    display:block;
    width:55px;
    height:55px;
    content: 'hello';
    background:#fff;
    padding:5px 10px;
    position:absolute;
    right:0;
    opacity:.5;
    -webkit-transition: all 0.3s ease-in-out;

}

p:before:hover {
    opacity:1;
    bakcground:#000;
}

编辑:我正在使用Chrome.

Answer 1

而不是p:before:hover,你需要p:hover:before.

请参阅: http ://jsfiddle.net/k93ZK/3/