pseudo-class ::after doesn't work on my div

Question

I am trying to give the div element pseudo-class ::after when I hover the div. But it doesn't work.

It works when i follow the answer Then I tried it to the img element but doesn't work

Any solution?

.div {
  margin: auto;
  max-width: 5.2rem;
  height: 5rem;
  border-radius: .75rem;
  margin-top: .75rem;
  position: relative;
  background: red;
}

.div:hover::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .6);
  z-index: 7;
  border: 2px solid orange;
}


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

<img src="" alt="" class="div">
  <img src="" alt="" class="div">
  <img src="" alt="" class="div">
  <img src="" alt="" class="div">

As mentioned by @curveball you could try `.div:hover:after` or switch the order like `.div:after:hover`. In the past I had that same issue and by switching the order worked. — KodeFor.Me, Nov 23 '21 at 14:31
try the answer in this [question](https://stackoverflow.com/questions/13233991/combine-after-with-hover) — Ahmed Elbessfy, Nov 23 '21 at 14:38

score 1 · Accepted Answer · answered Nov 23 '21 at 14:31

The selector .div:hover .div match a .div inside a .div. What you want is the selector .div:hover::after:

.div {
  margin: auto;
  max-width: 5.2rem;
  height: 5rem;
  border-radius: .75rem;
  margin-top: .75rem;
  position: relative;
  background: red;
}

.div:hover::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .6);
  z-index: 7;
  border: 2px solid orange;
}

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

It works, but when i change the div element with img element it doesn't work — Sham, Nov 23 '21 at 14:36

pseudo-class ::after doesn't work on my div

1 Answers1