Why does the filter: blur () disturb the normal behavior of the z-index of the pseudo element ::after? [duplicate]

Without filter: blur (1px) placed on the container everything works as expected (:: after is behind the container element due to the z-index: -1), but when I add it, something strange starts to happen. The pseudo element is still behind the text, button and input element, but not behind the container (“not behind the background color”). Does anyone know why this is happening? Would help a lot!

Here is the code: https://jsfiddle.net/2ntadghb/6/

HTML:

<div class="container">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, exercitationem?
   <button>
     click it
   </button>
   <input type="text">
</div>

CSS:

.container {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-color: #151515;
  margin: 20px auto;
  position: relative;
  color: white;
  
  filter: blur(1px);
}

.container::after {
  content: '';
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: red;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

The same problem also happens with -webkit-box-reflect: https://jsfiddle.net/2ntadghb/10/

CSS:

.container {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-color: #151515;
  margin: 20px auto;
  position: relative;
  color: white;
  
  -webkit-box-reflect: below;
}

.container::after {
  content: '';
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: red;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}