Simple css :before:hover not working? CSSlint no errors?

问题

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

This should be really simple, I just don't understand why it's not working. When hovering over the :before it should change it's opacity to 1, but it doesn't. Why?

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;
}

EDIT: I'm using Chrome.

回答1:

Instead of p:before:hover, you need p:hover:before.

See: http://jsfiddle.net/k93ZK/3/

回答2:

If you want to let it work in Internet Explorer, just add the following code in your css:

p:hover{}

That's all.

Working example for Internet Explorer (10):

http://jsfiddle.net/k93ZK/63/

来源：https://stackoverflow.com/questions/6884320/simple-css-beforehover-not-working-csslint-no-errors