为什么 filter 属性会影响 ::after 元素的宽度?

Question

我只是在做一个游戏，正在创建自定义按钮工具提示，并观察到一些非常字符串的东西。

这是第一个没有filter的片段

button{
padding: 5px;
}
button:hover::after{
content: "A quick brown fox jumped over a lazy dog";
position: absolute;
left: 60px;
background: gray;
color:white;
}

<button><span>Text</span></button>

包含filter的代码段

button{
padding: 5px;
filter: brightness(0.8)
}
button:hover::after{
content: "A quick brown fox jumped over a lazy dog";
position: absolute;
left: 60px;
background: gray;
color:white;
}

<button><span>Text</span></button>

当我使用filter: brightnesson 按钮时，::after的文本开始换行。我想不出filter和包装::after之间有任何关系.我知道我可以使用white-space:nowrap来解决这个问题。但是我想知道为什么当我使用filter()时文本开始换行的原因

Answer 1

当您将filter: brightness(0.8)设置为button时，它将成为::after伪元素而不是主体的定位上下文。这类似于设置按钮static以外的位置。

在此示例中，我删除了筛选器，但向按钮添加了position: relative，结果相同：

button{
position: relative;
padding: 5px;
}
button:hover::after{
content: "A quick brown fox jumped over a lazy dog";
position: absolute;
left: 60px;
background: gray;
color:white;
}

<button><span>Text</span></button>