伪元素之前和之后

Question

JS小提琴

我有一个div：

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

使用CSS：

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

我想要一个伪元素，放在它的底部。

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

剥离之前，我还有一个伪元素。

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

问题是，after伪元素没有位于strip div的底部。 我要去哪里错了。 请注意，我已经简化了这个问题，我知道有其他方法可以在div的顶部和底部获得彩色条。

Answer 1

CSS规范说 ：

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

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

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