title: How to style a pseudo element which is fixed relative to its parent .so when resizing the pseudo element will move along with parent
body: <p>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.</p>
  <pre><code>.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;
  }
  </code></pre>