My main objective is to prevent the box-shadow from overlapping with adjacent elements by utilizing the :before pseudo-element and adjusting the z-index.
However, I am facing an issue where the shadow appears beneath the container of the list item that is generating it due to the z-index property.
Interestingly, everything works perfectly if the parent container is just the body.
Should I look for a workaround for this problem or is it better to modify my HTML and CSS code?
HTML (PUG)
div#main
ul
li
li
li
CSS (Stylus)
#main
background-color: lightyellow;
height: 300px;
width: 300px;
ul
padding: 10px;
li
background-color: lightblue;
height: 50px;
width: 50px;
margin: 10px;
position: relative;
&::before
content: '';
box-shadow: 0px 0px 15px 20px rgba(0,0,0,0.5);
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: -1;