顶部伪元素的堆栈顶部

Question

我有一个元素有两个伪元素，:before和:after。父母的位置与z-index: 0相关，两个伪元素的绝对位置为z-index: -1。

但是，我无法获得顶层的父元素。我怎样才能解决这个问题？

下面是说明这一问题的codepen：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