Search code examples
csscss-selectorspseudo-elementpseudo-classcss-content

using both :after and :hover

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?

Solution

  • You can combine the two:

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

    JSFiddle.