获取:在设置样式后显示在元素后面

我很难让伪元素出现在父元素后面。我正在尝试创建一个如下所示的按钮:

不过,我不知道如何让棕色按钮显示在按钮后面。我要做的就是:

我的造型是:

.orangeborderedbutton{
文字装饰:无;
文本转换:大写;
字体粗细:500;
职位:相对;
裕度:10px 25px;
背景色:透明;
边界半径:10px;
边框:1倍纯白;
Z指数:3;
}
.OrangeBorderedButton:之后{
位置:绝对;
身高:100%;
内容:
宽度:100%;
背景色:橙色;
左:-2PX;
底部:2PX;
边界半径:10px;
Z指数:1;
}
< /代码> <


不过,我不知道如何让棕色按钮显示在按钮后面。我要做的就是:



我的造型是:

.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;
}