为什么不能取消 ::after 伪元素上的值？

Question

下面是一个非常简单的例子来演示这个问题。

所有段落元素的样式都是红色的，但是 ::after 生成的内容应该不再是 红色。它的颜色应该取消设置。

为什么这不起作用？

<!DOCTYPE html>
<html>
<head>
<style>
p {color:red}
p::after { 
  content: " and after";
  color: unset;
}
</style>
</head>
<body>
<p>before</p>
</body>
</html>

与属性类似color，至少可以手动指定不同的值。但是我运行遇到了这样一种情况，我想在一个元素上使用 filter: brightness(1.2) 但不允许该过滤器影响 ::after 内容。

Answer 1

根据this：

unset is a CSS value that's the same as "inherit" if a property is inherited or "initial" if a property is not inherited

由于after元素继承自p元素，unset将与inherit相同，颜色将与p标签相同的红色.

改用initial

<!DOCTYPE html>
<html>
<head>
<style>
p {color:red}
p::after { 
  content: " and after";
  color: initial;
}
</style>
</head>
<body>
<p>before</p>
</body>
</html>

为什么不能取消 ::after 伪元素上的值？

Why can't values on the ::after pseudo-element be unset?

css

pseudo-element