Why the selector :before:hover is not working?

Question

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

Hinder

btw. Ie7, IE6 don't suport :before and :after. IE8 support is buggy. – Protist

@nix: You could even add that IE doesn't support opacity and -webkit-transition is WebKit only... lots of things OP already knows and obviously doesn't care about. – Corking

There are many things that may be obvious to some and not to others. This is not necessarily for OP but others who will read this question later. – Protist

Something that is worth nothing, though, is that CSS Lint isn't a validator. It's just something that complains about, well, everything. Particularly everything that the spec says is OK/encouraged. – Corking

yeah i've heard the complaints about CSS lint, but if IT doesn't throw errors, then i'm pretty sure i'm good... because it complains about everything. – Hinder

im using chrome. what kind of person using stackoverflow really uses ie as their main browser? (answer, people who don't know about chrome). If someone is reading this, and you're using IE, and you've never tried Chrome, I would highly suggest you research browser speed tests and see how they all stack up. Some people love Firefox, some Safari, but from what I've read, Chrome is the fastest. Some might argue that speed at this point between these 3 browsers is minuscule, but i'll take as much speed as I can get. Not to mention it's just a beautiful browser... – Hinder

Answer 1

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

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

Giaimo

Beautiful, what if I wanted to add the hover event to the p:before element, so it changes the opacity when I hover the p:before element, not the paragraph itself? – Hinder

@android.nick: Unfortunately, there's no way to do that with pseudo-elements (such as :before). – Giaimo

+1 ah, that was the answer that I was looking for, thank you! – Hinder

Answer 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/

Rockey