Question

我有一个div：

<div id="strip"></div>

使用CSS：

width: 100%;
height: 130px;
background: grey;

我想要一个伪元素，并且位于条带的底部。

 #strip:after {
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    background: blue;
}

我在strip之前也有一个伪元素。

 #strip:before {
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    background: yellow;
}

问题是，after伪元素不位于条带div的底部。我哪里错了。请注意我已经简化了问题，我知道有另外一种方法可以在div的顶部和底部获得颜色条纹。

Answer 1

CSS specification says：

：before和：after伪元素与其他框交互，好像它们是在关联元素中插入的真实元素一样。

为了解决您的问题，您可以使用Nico O建议的解决方案。后伪元素绝对位于主元素的底部。

#strip{
  width: 100%;
  height: 130px;
  background: grey;
  position: relative;
  padding-bottom: 10px;
}
#strip:after {
  content: "";
  display: block;
  width: 100%;
  height: 10px;
  background: blue;
  position: absolute;
  bottom:0;
}    
#strip:before {
  content: "";
  display: block;
  width: 100%;
  height: 10px;
  background: yellow;
}

伪元素之前和之后

1 个答案: