By adding an image, my pseudo-element "::after" disappears. Why and how to fix?

Question

The "::after" only works for the img tag whenever there is no source for the image. How do I change that? I want the pseudo element to overlay on top of the image.

I've tried messing around with z-index, but I am very confused as to why it refuses to work with images being loaded.

#work {
    text-align: center;
}

#work .project {
    position: relative;
    display: inline-block;
    margin: 0px 30px;
    padding: 0px 10px;
}

#work .project .icon {
    position: relative;
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 200px;
    margin: 0px auto;
    background-color: black;
}

#work .project .icon::after {
    position: absolute;
    left: 0;
    content: "";
    background-color: red; /* !!! */
    opacity: 0.3;
    width: 200px;
    height: 200px;
    border-radius: 200px;
}

<!-- with image -->
<div class="container" id="work">
<div class="project">
    <img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="icon">
    <span>A</span>
</div>

<!-- no image -->
<div class="project">
    <img src="" class="icon">
    <span>B</span>
</div