Почему после того как задан Transform для карточки псевдоэлемент вылезает поверх карточки?

Question

[Nekish161]

.price__card-wrapper {
   padding: 32px;

   display: flex;
   flex-direction: column;
   gap: 20px;

   background-color: #fff;
   border-radius: 19px;

   position: relative;
   z-index: 100;

   transition: transform 0.5s ease;
}

.price__card-wrapper:hover {
   box-shadow: 0px 16px 8px 5px rgba(34, 60, 80, 0.2);
   transform: scale(1.1);
}

.price__card-wrapper:after {
   content: "";
   width: 200px;
   height: 120px;
   background-image: url(../img/wave.svg);
   position: absolute;
   bottom: -30px;
   left: -25px;
   z-index: -10;
   opacity: 0;
}

.price__card-wrapper:hover::after {
   opacity: 1;
}

https://disk.yandex.ru/i/OL0wI-ooCCAmnw - ссылка на скриншот проблемы

Answer 1

[Ivan Ustûžanin]

потому что Stacking context так работает