How to style a pseudo element which is fixed relative to its parent .so when resizing the pseudo element will move along with parent

Question

In the following code I am creating a pseudo element as a hover effect for parent element but when I am resizing the window in dev tools then the pseudo element stays there but the parent moves.

.explore{
    width:274px;
    height:274px;
    border-radius: 50%;
    background-color: var(--bg-light);
    text-align: center;
    padding:119px 64px 118px 62px;
    box-sizing: border-box;
    margin-top:108px;
}
.explore::after{
  content:'';
  position:absolute;
  top: 55%;
  left: 71.25%;
  width:274px;
  height:274px;
  border-radius: 50%;
  background-color:rgba(255, 255, 255, 0.24);
  z-index:-1;
  opacity:0;
  transition:opacity 500ms ease-out,transform 500ms ease-in-out;
}  
.explore:hover::after
,.explore:focus::after{
  transform: scale(1.5);
  opacity: 0.6;
}