I am facing an issue while trying to add a pseudo element after a div in my react project. Surprisingly, the code works perfectly fine in CodePen but fails to work on my local machine. I have applied z-index only in CodePen, which seems to resolve the issue there. However, when I apply z-index for both the parent div and the pseudo-element in my project, it still doesn't work. Can someone please help me identify the mistake I made? Your guidance is much appreciated. Thank you in advance. My code snippet is as follows: HTML:
<div className='cards'>
<div className='card active'>Card</div>
<div className='card'>Card</div>
<div className='card'>Card</div>
</div>
CSS:
.card {
width: 300px;
height: 200px;
background-color: #fff;
border-radius: 5px;
&.active {
position: relative;
box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.1);
z-index: 10;
&::after {
position: absolute;
content: "";
top: 0;
left: 0;
width: calc(100% + 5px);
height: calc(100% + 15px);
border-radius: 5px;
background-color: #923929;
z-index: -1000;
transform: rotateZ(-2deg);
transform-origin: top left;
}
}
}
.cards {
padding: 5rem;
display: flex;
gap: 20rem;
background-color: #92392920;
}
The output can be seen here: https://i.sstatic.net/I39CF.png
If the z-index for the parent div is removed, the output looks like this: https://i.sstatic.net/fxY3O.png