Psuedo After element not showing

Question

Trying to display a little chevron as an psuedo after element but I can't get it to display for some reason. I've tried playing the z-index but that doesn't do anything for the image one way or another. Any ideas what I'm doing wrong here? This is essentially what I want it to look like:

          <div class="post-arrow post-arrow--left"></div>
         
          <div class="post-arrow post-arrow--right"></div>
      

.post-arrow {
    position: relative;
    height: 80px;
    width: 80px;
    z-index: 0;
    border-radius: 50%;
    background-color: rgba($color-black, .9);

    &--right {
        &::after {
            position: absolute;
            display: block;
            z-index: 1;
            background-image: url('../../../lib/images/chevron-right.png');
            background-repeat: no-repeat;
            content: "";
            color: $color-white;
            height: 80px;
            width: 80px;
           
        }
    }
        &--left {
            &::after {
                position: absolute;
                display: block;
                z-index: 1;
                background-image: url('../../../lib/images/chevron-left.png');
                background-repeat: no-repeat;
                content: "";
                color: $color-white;
                height: 80px;
                width: 80px;
               
            }
    }
}

Answer 1

I feel like your fundamental CSS is ok. I boiled your code down to more simplistic CSS, with no dynamic colors or locally references images and it seems to work ok. I'd check your image paths or something else.

.post-arrow {
  position: relative;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background-color: red;
  display:block;
}

.post-arrow--right::after {
  position: absolute;
  display: block;
  background-image: url('https://www.flaticon.com/svg/static/icons/svg/566/566012.svg');
  background-repeat: no-repeat;
  content: "";
  color: #fff;
  height: 80px;
  width: 80px;
}

<div class="post-arrow post-arrow--right"></div>