Простой css: before: hover не работает? 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/

Answer 2

Если вы хотите, чтобы он работал в Internet Explorer, просто добавьте следующий код в ваш css:

p:hover{}

Вот и все.

Рабочий пример для Internet Explorer (10):

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