How can i use hover effect on after element with css?

Question

This is my code, I want to show hover effect on after element.

 #car:after:hover{background:red:}

but this is not working.

The element itself receives the event, not its pseudo element (also, syntax errors): `#car:hover::after { background: red; }` — Lars Beck, Apr 07 '17 at 07:55
Check this out I guess it would solve your problems. http://stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter — harsha motwani, Apr 07 '17 at 07:58

score 2 · Accepted Answer · answered Apr 07 '17 at 08:00

check out this demo below. I think you are missing content property.

the Red div is created using :after and changes its color on hover.

the selector:after:hover won't work.

.car {
  position: relative;
  width: 100px;
  height: 100px;
  background: yellow;
}

.car:hover {
  background: skyblue;
}

.car:after {
  content: '';
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: green;
}

.car:hover:after {
  background: red;
}

<div class="car"></div>

How can i use hover effect on after element with css?

1 Answers1

Linked