當我試圖在is parent div下面放一個::after時，它不起作用。

我嘗試了所有的方法，但我沒有找到任何答案，這就是為什么我問你們

<div className='spacesSpaceContainer'>

    <div className='spaceCreator'>
            
    </div>

 </div>

這是我的集裝箱的tsx

.spacesSpaceContainer{
    width: 100%;
    height: fit-content;
    display: grid;
    padding: 20px var(--paddingside);
    gap: 30px;
}

.spaceCreator{
    width: 100%;
    height: 300px;
    border-radius: 16px;
    background-color: var(--hoverColorOpacity);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    backdrop-filter: blur(100px);
    z-index: 0;
}
.spaceCreator::after{
    content: '';
    position: absolute;
    top: 25%;
    right: 25%;
    width: 50%;
    height: 50%;
    background: linear-gradient(135deg, var(--purple), var(--blue)) ;
    border-radius: 16px;
    z-index: -1 ; 
}

我不知道為什么？spaceCreator::在不工作之后，我想把它放在父div(。spaceCreator)但當我嘗試時，它不在下面。

Using ::after不會出現在關聯元素之后，而是出現在關聯元素內部的內容之后。這意味著。spaceCreator元素和。spaceCreator::after具有相同的堆疊上下文，因此z-index不能在沒有另一個的情況下更改其中一個的堆疊上下文