CSS scale on parent make pseudo element to lose z-index

<div class="container">
  <div class="card></div>
</div>

.container {
  height: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;

  & .card {
    width: 300px;
    height: 120px;
    border: 4px solid #000;
    border-radius: 20px;
    background-color: #fff;
    position: relative;
    transition: scale 250ms ease;

    &:hover {
      scale: 1.1;
    }
    
    &::before {
      content: "";
      position: absolute;
      width: inherit;
      height: inherit;
      transform: translate(10px, 10px);
      background-color: black;
      z-index: -1;
      border-radius: inherit;
    }
  }
}

I expect, when I hover the parent the pseudo element should scale with the parent but not lose z-index. I try putting z-index on hover like z-index: 2; for parent and inside &:hover I try &::before{ z-index: -2; } doesn’t work.

>Solution :

As the before pseudo element is coming inside the card element z-index won’t work.You need to add the border styles to a child div it will work fine.please check this

.container {
  height: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;

  & .card {
    width: 300px;
    height: 120px;
    position: relative;
    transition: scale 250ms ease;
    .card-content{
      border: 4px solid #000;
      border-radius: 20px;
      background-color: #fff;
      height:100%;
      position:relative;
      z-index:1;
    }

    &:hover {
      scale: 1.1;
    }
    
    &::before {
      content: "";
      position: absolute;
      width: inherit;
      height: inherit;
      transform: translate(10px, 10px);
      background-color: black;
      border-radius: 20px;
    }
  }
}

<div class="container">
  <div class="card">
    <div class="card-content">
    
    </div>
  </div>
</div>

Hope this is what you are trying to achieve.