Why does this absolutely positioned ::after psudo-element collapse unless the parent has a filter?-CodePudding

I'm trying to create a "cycling rainbow glow" effect for text in CSS. I've more or less accomplished that, but I've ran into something I can't explain. When I remove the superfluous filter: blur(0px) from the parent element the ::after psudo-element collapses to the left.

.rainbow {
    display: inline-block;
    color: white;
    filter: blur(0px);
}

.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 }
}

https://jsfiddle.net/tpm1gf5v/

CodePudding user response：

It looks like this is because without filter: blur(0px), the rainbow is no longer a relative container (according to this answer), and also does not have a stacking context to place ::after properly.

This may have caused ::after to be placed relative to body which resulted in the error.

It seems to be fixed by giving rainbow a relative positioning, and specify a new stacking context:

.rainbow {
  display: inline-block;
  color: white;

  /*