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?

@SnareChops I have but I left a space like this `#parent:hover :after` is that my problem? lol — bashleigh, Mar 21 '13 at 16:08
@Beneto `#parent:hover :after` would style the `#parent`'s child element's `:after`, rather than styling the actual `#parent`'s `:after`. — James Donnelly, Mar 21 '13 at 16:11

James Donnelly · Accepted Answer · 2015-08-11T12:49:55.390

6

You can combine the two:

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

edited Aug 11 '15 at 12:49

answered Mar 21 '13 at 16:05

James Donnelly

1

Ack, what a [cruel world](http://i.imgur.com/RUXL5vI.png) we live in on our ever lasting quest for the sacred upvotes! ;-) – James Donnelly Mar 21 '13 at 16:17

score 5 · Answer 2 · answered Mar 21 '13 at 16:06

5

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

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

answered Mar 21 '13 at 16:06

Darren

score 4 · Answer 3 · answered Mar 21 '13 at 16:06

4

Yes of course you can :

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

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

answered Mar 21 '13 at 16:06

Mr. Alien

3 Answers3