using both :after and :hover

Question

Is it possible to only display the :after pseudo using :hover? For example using alternative elements.

#parent{}
#child{display:none;}
#parent:hover >#child{display:block;}

As far as I've got with the same method:

#parent{}
#parent:after{content:'hi';display:none;}
#parent:hover  #parent:after{display:block;}

Is it possible at all? Or am I fooling myself?

Supplicatory

Have you tried #parent:hover:after? – Window

Did you try it? – Dozer

@Window I have but I left a space like this #parent:hover :after is that my problem? lol – Supplicatory

Yes, remove the space and that should help – Window

@Window Yea that sorted it face palm – Supplicatory

@Beneto #parent:hover :after would style the #parent's child element's :after, rather than styling the actual #parent's :after. – Bartender

Answer 1

You can combine the two:

#parent:hover:after {
    content:'hi';
}

JSFiddle.

Bartender

Ack, what a cruel world we live in on our ever lasting quest for the sacred upvotes! ;-) – Bartender

Answer 2

Yes. Not sure why you didn't try it yourself but it's possible:

#parent:hover:after{content:'hi';}

http://jsfiddle.net/uz3w4/

Optics

Answer 3

Yes of course you can :

Demo

<a href="#">Demo</a>

a:hover:after {
    content: 'blah';
}

Starlin