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?

Answer 1

You can combine the two:

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

JSFiddle.

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/

Answer 3

Yes of course you can :

Demo

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

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