为何绝对定位的::after伪元素需父元素带filter才不塌陷？

云上老周

2026-8-9

问题原因分析

你遇到的问题本质是包含块的规则差异：

当父元素.rainbow添加filter: blur(0px)时，CSS的filter属性会强制元素成为其内部绝对定位后代的包含块，此时::after伪元素的top/right/bottom/left: 0是相对于父元素定位的，自然和原文字对齐。
移除这个filter后，父元素只是inline-block但未设置position: relative，也没有其他能创建包含块的属性（比如transform、perspective等），此时绝对定位的::after伪元素的包含块会变成初始包含块（视口），导致伪元素的定位不再受父元素约束，进而出现向左塌陷的错位。

解决方案

不需要依赖无意义的filter: blur(0px)，直接给父元素添加position: relative就能让伪元素以父元素为包含块，实现正确定位：

.rainbow {
    display: inline-block;
    color: white;
    position: relative; /* 替代filter，明确创建包含块 */
}

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

补充说明

除了position: relative，以下属性也能让元素成为绝对定位后代的包含块：