html - 如何使内容出现在div之前和之后

我希望来自&:before和&:after的内容出现在我的div.first之外以及之前和之后。

我以为最好的方法是使用上面的CSS，但是它仍然出现在我的div中，我使用的是错误的方法还是其他东西？

Jsfiddle：https://jsfiddle.net/1uuL3sf6/1/

的HTML

<div class="first">

</div>

的CSS

.first
{
  width: 100%;
  height: 500px;

  background-color:red;

  &:before
  {
    content:"before";
    width: 100%;
    height: 20px;
  }

   &:after
  {
    content:"after";
    width: 100%;
    height:20px;
  }

}

最佳答案

伪元素:before和after不在其父元素之前和之后创建内容。它们插入在其实际内容之前和之后。


  伪元素恰好符合该词的含义。它会创建一个音素元素，并将其插入您定位的元素的内容之前或之后。


来自“ Learning To Use The :before And :after Pseudo-Elements In CSS”

这就是为什么它们总是显示在其父母的框中。



但是，作为示例，您可以使用绝对定位将伪元素移出框：

&:before {
    content:"before";
    position: absolute;
    top: -20px;
    width: 100%;
    height: 20px;
}

但是您也可以float或将它们显示为block以获得所需的结果。

演示版

Try before buy

关于html - 如何使内容出现在div之前和之后，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42202580/