Css 为什么这个绝对定位的 ：：after 伪元素会崩溃，除非父级有过滤器

html,
body {
  background: #d6daf0;
  font-family: arial, helvetica, sans-serif;
  font-size: 100px;
}

.rainbow {
  display: inline-block;
  color: white;
  
  /* ???? Add this */
  position: relative;
  
  /* ???? Add one of these two for a new stacking context */
  isolation: isolate;
  /* z-index: 0; */
}

.rainbow::after {
  content: attr(data-text);
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg,
      hsl(0, 100%, 50%),
      hsl(30, 100%, 50%),
      hsl(60, 100%, 50%),
      hsl(90, 100%, 50%),
      hsl(120, 100%, 50%),
      hsl(150, 100%, 50%),
      hsl(180, 100%, 50%),
      hsl(210, 100%, 50%),
      hsl(240, 100%, 50%),
      hsl(270, 100%, 50%),
      hsl(300, 100%, 50%),
      hsl(330, 100%, 50%),
      hsl(360, 100%, 50%)) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  filter: blur(10px);
  animation: scroll_background 2s linear infinite;
}

@keyframes scroll_background {
  to {
    background-position: -200% 0
  }
}

<span class="rainbow" data-text="Hello, World!">Hello, World!</span>