title: Psuedo After element not showing
body: <p>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:
  <a href="https://i.stack.imgur.com/R8sj2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R8sj2.png" alt="enter image description here" /></a></p>
  <pre><code>
            &lt;div class=&quot;post-arrow post-arrow--left&quot;&gt;&lt;/div&gt;
           
            &lt;div class=&quot;post-arrow post-arrow--right&quot;&gt;&lt;/div&gt;
        
  
  .post-arrow {
      position: relative;
      height: 80px;
      width: 80px;
      z-index: 0;
      border-radius: 50%;
      background-color: rgba($color-black, .9);
  
      &amp;--right {
          &amp;::after {
              position: absolute;
              display: block;
              z-index: 1;
              background-image: url('../../../lib/images/chevron-right.png');
              background-repeat: no-repeat;
              content: &quot;&quot;;
              color: $color-white;
              height: 80px;
              width: 80px;
             
          }
      }
          &amp;--left {
              &amp;::after {
                  position: absolute;
                  display: block;
                  z-index: 1;
                  background-image: url('../../../lib/images/chevron-left.png');
                  background-repeat: no-repeat;
                  content: &quot;&quot;;
                  color: $color-white;
                  height: 80px;
                  width: 80px;
                 
              }
      }
  }
  </code></pre>