CSS - box-shadow не отображается при использовании:before и z-index

Question

Моя цель состоит в том, чтобы предотвратить наложение тени на поверхностях соседних элементов, используя :before а также z-index,

Но тень идет под контейнером элемента списка, который отбрасывает ее из-за z-index,

Он отлично работает, если его родительский контейнер body,

Есть ли обходной путь по этому поводу или я должен изменить свой HTML и CSS

HTML (PUG)

div#main
  ul
    li
    li
    li

CSS (Стилус)

#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

Вы используете абсолютно позиционированный pseudo элементы без настройки position: relative его родителю, то есть, почему он вызывает проблемы такого типа, и вы не установили некоторые базовые правила CSS для лучших результатов, как:

Фрагмент кода

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

Я нашел ответ, я не знаю, лучший ли это путь

HTML (PUG)

ul
  li
    div.content
      span All
  li
    div.content
      span By
  li
    div.content
      span Myself
  li
    div.content
      span ANYMORE!!!

CSS (СТИЛЬ)

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%)