伪后元素不显示

Question

试图在元素后显示一个小人字形作为伪造，但由于某种原因我无法显示它。我试过播放 z-index 但这对图像没有任何作用。知道我在这里做错了什么吗？这基本上就是我想要的样子：


          <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

我觉得你的基础 CSS 还可以。我将您的代码简化为更简单的 CSS，没有动态颜色或本地引用图像，它似乎工作正常。我会检查您的图片路径或其他内容。

.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>

伪后元素不显示

Psuedo After element not showing

css

pseudo-element