偽元素之前和之后

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