代码之家 › 专栏 › 技术社区 › Ben Cavenagh

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

sass css html

Ben Cavenagh · 技术社区 · 7 年前

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

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

我的造型是:

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

2 回复 | 直到 7 年前

Marcel Wasilewski 7 年前

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>

iPraxa Inc 7 年前

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

推荐文章