html - 将伪元素的父元素堆叠在顶部

Question

我有一个包含两个伪元素的元素，:before 和 :after。父元素使用 z-index: 0 相对定位，两个伪元素使用 z-index: -1 绝对定位。

但是，我无法让父元素堆叠在顶部。我怎样才能解决这个问题？

这是一个说明问题的代码笔:http://codepen.io/zthall/pen/NNmKgZ

SCSS 代码:

.pokeball {
  height: $size / 5;
  width: $size / 5;
  background: white;
  border-radius: 50%;
  border: ($size / 20) solid $black;
  position: relative;
  margin: ($size * 4 / 5);
  z-index: 1;

  &:after, 
  &:before {
    content: '';
    display: block;
    width: $size;
    height: $size / 2;
    border-radius: $size $size 0 0;
    border: ($size / 20) solid $black;
    z-index: -1;
    position: absolute;
  }

  &:after {
    background: $red;
    top: -$size / 2;
    left: -$size / 2;
  }

  &:before {
    background: $white;
    top: 0;
    left: -$size / 2;
    transform: rotate(180deg);
  }
}

HTML:

<div class="pokeball"></div>

Answer 1

您可以使用线性和径向渐变来填充圆圈，而不是使用带有伪 :before 和 :after 元素的两个半圆元素。

http://codepen.io/zthall/pen/KzYKJZ