Menu
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.
478
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
