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

顶部伪元素的堆栈父

1 个答案: