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

【问题标题】：Why can't values on the ::after pseudo-element be unset?为什么不能取消设置 ::after 伪元素上的值？
【发布时间】：2019-10-30 17:05:38
【问题描述】：

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

所有段落元素的样式都是红色的，但是::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 内容。

【问题讨论】：

相关：stackoverflow.com/q/56859256/8620333

标签： css pseudo-element

【解决方案1】：

据this：

unset 是一个 CSS 值，如果一个属性是如果属性未继承，则为继承或“初始”

由于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>

【讨论】：

感谢您提供的有用信息。虽然color: initial 确实在::after 伪元素中工作，但filter: initial 却不行。所以必须有一些额外的规则来管理过滤器属性的继承。如果有人知道，请分享。
我刚刚发现an answer 解决了我关于filter 的部分问题，所以我认为此案已结案。 :-)