CSS - box-shadow not appearing when using :before and z-index - html

Question

My goal is to prevent box-shadow from overlapping on top of nearby elements by using :before and z-index.
But the shadow is going underneath the container of the list item that casts it because of the z-index.
It works fine if its parent container is just the body.
Is there a workaround regarding this or should I change my HTML and CSS
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

Answer 1

you are using an absolutely positioned pseudo elements without setting position: relative to its parent, i.e. why its causing this type of issues also you haven't set some basic CSS rules for a better results as:
Code Snippet
html,
body {
margin: 0;
padding: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#main {
background-color: lightyellow;
height: 300px;
width: 300px;
}
ul {
padding: 10px;
margin: 0;
position: relative;
}
ul li {
background-color: lightblue;
height: 50px;
width: 50px;
margin: 10px;
position: relative;
overflow: hidden;
}
ul li::before {
content: '';
box-shadow: 0px 0px 15px 20px rgba(0, 0, 0, 0.5);
position: absolute;
top: 0px;
left: 0px;
display: inline-block;
width: 100%;
height: 1px;
}
<div id="main">
<ul>
<li>List01</li>
<li>List02</li>
<li>List03</li>
</ul>
</div>

Answer 2

I found an answer, I don't know if this is the best way to go
HTML (PUG)
ul
li
div.content
span All
li
div.content
span By
li
div.content
span Myself
li
div.content
span ANYMORE!!!
CSS (STYLUS)
body
margin 15px
ul
display inline-block
li
width 120px
height 50px
.content
background-color lightyellow
border 1px solid rgba(0,0,0,0.85)
widows 100%
height 100%
position relative
&::after
box-shadow 0px 0px 15px 5px rgba(0,0,0,0.5)
position absolute
top 0
right 0
left 0
bottom 0
content ''
z-index -1
span
position absolute
top 50%
left 50%
transform translate(-50%, -50%)