How to change pseudo-element child when parent is hovered over?

问题

I'm trying to get an item that is a pseudo element to change when the parent is hovered over. The pseudo element here is .child:after. I know this works:

.parent:hover .child { 
   background: #FF0000; 
  }

But this does not seem to work:

.parent:hover .child:after { 
   background: #FF0000; 
  }

Any ideas? Thank you!!

回答1:

Try to add content:'' to ::after pseudo-class;

Also be aware that :after works with non-replaced elements (im, input, textarea, and so on) (refference: replaced elements.)

Additionally: pay attention to display property of .child:after selector.

Here you go with a working example https://jsfiddle.net/wq2edhf3/.

来源：https://stackoverflow.com/questions/31952652/how-to-change-pseudo-element-child-when-parent-is-hovered-over