頂部僞元素的堆棧頂部

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