6

Below is a very simple example to demonstrate the issue.

All paragraph elements are styled red, but then the content generated by ::after should not be red anymore. Its color should be unset.

Why doesn't this work?

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

With a property like color, at least a different value can be manually specified. But I've run into a case where I want to use filter: brightness(1.2) on an element but not allow that filter to affect the ::after content.

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
Mentalist
  • 1,530
  • 1
  • 18
  • 32

1 Answers1

10

According to 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

As after element is inherited from p element, unset will be as inherit and the color will be the red same as p tag.

Use initial instead

<!DOCTYPE html>
<html>
<head>
<style>
p {color:red}
p::after { 
  content: " and after";
  color: initial;
}
</style>
</head>
<body>
<p>before</p>
</body>
</html>
Kareem Dabbeet
  • 3,838
  • 3
  • 16
  • 34
  • 1
    Thank you for the helpful information. While `color: initial` does work in an `::after` pseudo-element, `filter: initial` does not. So there must be some additional rule for how inheritance is managed for the filter property. If anyone knows, please share. – Mentalist Jul 30 '19 at 07:09
  • I just found [an answer](https://stackoverflow.com/a/29249483/2454914) that addresses the part of my question about `filter`, so I think this case is closed. :-) – Mentalist Jul 30 '19 at 07:45