I've been struggling to get a small chevron to display as a pseudo-after element, but for some reason it's just not showing up. I've tried adjusting the z-index without any luck. Any suggestions on what I might be doing wrong? Here's how I envision it looking:
https://i.sstatic.net/R8sj2.png
<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;
}
}
}