在样式显示后显示在元素后面

Question

我无法让我的伪元素显示在父元素的后面。我正在尝试创建一个看起来像这样的按钮：

但是我不知道如何使棕色显示在按钮后面。我得到的就是这个：

我的风格是：

.orangeBorderedButton{
    text-decoration: none;
    text-transform: uppercase; 
    font-weight: 500;
    position: relative; 
    margin:10px 25px;
    background-color: transparent;
    border-radius: 10px;
    border:1px solid white;
    z-index: 3;
}
.orangeBorderedButton:after{
    position: absolute;
    height: 100%;
    content: '';
    width: 100%;
    background-color: $orange;
    left: -2px;
    bottom: 2px; 
    border-radius: 10px;
    z-index:1;
}

Answer 1

我只需要旋转一下CSS，然后将背景设为按钮即可，而不是after元素即可，那么您应该很好。

http://jsfiddle.net/zt4yufx0/28/

body{
  background:black;
}

.orangeBorderedButton{
  text-decoration: none;
  text-transform: uppercase; 
  font-weight: 500;
  position: relative; 
  margin:10px 25px;
  background-color: transparent;
  border-radius: 3px;
  border-color: transparent;
  background-color: #aa7936;
  z-index: 5;
  padding: 7px 15px 3px 25px;
}
.orangeBorderedButton:after{
  position: absolute;
  border:1px solid white;
  height: 100%;
  content: '';
  width: 100%;
  left: 5px;
  bottom: -5px; 
  border-radius: 3px;
  z-index:-5;
}

<a data-sr>
  <button class="button large orangeBorderedButton">See All</button>
</a>

Answer 2

在按钮CSS中使用背景色，并为：after加上边框，请参见此代码

 .orangeBorderedButton{
    text-decoration: none;
    text-transform: uppercase; 
    font-weight: 500;
    position: relative; 
    margin:10px 25px;
    background-color: #aa7936;
    border-radius: 10px;
    border: 0px;
    z-index: 3;
}
.orangeBorderedButton:after{
    position: absolute;
    height: 100%;
    content: '';
    width: 100%;
    border:1px solid white;
    left: 2px;
    top: 2px; 
    border-radius: 10px;
    z-index: 4;
}