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: brightness时，::after的文本开始自动换行。我想不出filter和::after的换行之间的任何关系。我知道我可以使用white-space:nowrap来解决此问题。但是我想知道为什么我使用filter()

时文本开始换行的原因

Answer 1

将filter: brightness(0.8)设置为button时，它将成为::after伪元素的positioning context而不是主体。类似于将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>

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

1 个答案: