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

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">

>Solution :

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>

Leave a Reply