Простой css: before: hover не работает? CSSlint без ошибок?

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.