a href doesnt work on image with :after content:””;

I’m trying to load a link after clicking my image, I used an after effect on the image with content:”; and this prevents the a href to open The href calling inside image:

/* overlay for img */

#masks .mask-img:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: .65;
  /*give the img dark look after relative position^ */
}
<div class="mask-img">
  <a href="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/face-masks-1612827017.jpg?crop=0.503xw:1.00xh;0.238xw,0&resize=640:*" target="_blank">
    <img src="/image/maskKN95.png" alt="n95">
  </a>
</div>

Answer

As your overlay is covering the link, you will not be able to click the link. If you add pointer-events:none to the overlay, you should be able to click through it:

/* overlay for img */

.mask-img {
  position: relative;
}

.mask-img:after {
  content: '';
  display:block;
  pointer-events:none;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: .65;
  /*give the img dark look after relative position^ */
}
<div class="mask-img">
  <a href="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/face-masks-1612827017.jpg?crop=0.503xw:1.00xh;0.238xw,0&resize=640:*" target="_blank">
    <img src="/image/maskKN95.png" alt="n95">
  </a>
</div>