CSS unusual use of :after - css

Question

I have come across a fragment of CSS that works. I would like to understand why it works for my own edification. My question is a general one on the sematics of using :after in CSS.
The Wordpress Twenty Nineteen theme puts a dark filter on feature images in order to make the (white) header text more readable.
I was searching for a way to remove the dark filter on specific feature images.
I found a post that suggests this css:
.site-header.featured-image:after {
background: none;
}
It works a treat!
Using Firefox inspector I see that .site-header & .featured-image are both classes of an enclosing <header> element. Layout is flex.
I'm trying to get my head round this usage of :after. My search of :after suggests that is a way of adding 'content' after an element. This example add no content.. instead it seems to be modifying/overriding an existing property.
If I remove ':after' it stops working, so It's definitely necessary.
Can any kind expert explain what is going on here and/or point me to a spec that explains it?
Thank you

Answer 1

What it actually appear to be seeing is specificity.
What :after does is add an element after the last child or content of the element that :after is applied to. See: https://developer.mozilla.org/en-US/docs/Web/CSS/::after
Here is a rough example
.featured-image {
position:relative;
padding:5px;
}
.featured-image > p {
position: relative;
z-index:10;
}
.featured-image:after {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
border: 1px solid black;
background-color: #CCC;
z-index:1;
}
.site-header.featured-image:after {
background: none;
}
<div class="featured-image"><p> :after will have a background</p></div>
<div class="site-header featured-image"><p> :after wont't have a background 2</p></div>
As .site-header.featured-image:after is more specific than .featured-image:after, .site-header.featured-image:after takes preference for any conflicting styles.

Answer 2

With ::after and ::before you can add html elements or at least something that mimics the functionality of an html element.
::before will be placed before all the elements inside the element and ::after would be the last element.
As an example, Say we already have this markup,
<div class="some-div">
<h1>some text</h1>
<div>Another div</div>
<!-- bunch of other elements -->
</div>
If we add the following css,
.some-div::after,
.some-div::before {
content: "";
display: block;
}
It'll result in this markup,
<div class="some-div">
::before
<h1>some text</h1>
<div>Another div</div>
<!-- bunch of other elements -->
::after
</div>
Now, I'm guessing that your Wordpress theme adds an after element with a background-color of some value that overlays the image. And by setting the background of that ::after element to none you overwrite those styles and get rid of the overlay.
This snippet further elaborates what happens in the theme.
.some-div {
width: 20rem;
height: 20rem;
}
.img {
position: relative;
background-color: orangered;
width: 100%;
height: 100%;
}
.some-div:hover .img::after {
position: absolute;
top: 0;
left: 0;
content: "";
display: block;
width: 100%;
height: 100%;
background-color: black;
opacity: .3;
}
<div class="some-div">
<div class="img"></div>
<div>