Question

我希望&: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;
  }

}

Answer 1

伪元素: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

Answer 2

＆＃13;

.first {
  width: 100%;
  height: 500px;
  
  background-color:red;
 } 
  .first::before
  {
    content:"before";
   
  }
  
   .first::after
  {
    content:"after";
    
  }

＆＃13;

<div class="first">
</ br>  This is your first div. </ br>  
</div>

＆＃13;

Answer 3

这是一个解决方案：https://jsfiddle.net/e8qtoxL9/

.first
{
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background-color:lightgreen;
  position: relative;

  &:before
  {
    content:"before";
    width: 100%;
    height: 20px;
    display: block;
    background: lightblue;
    left: -100%;
    top: 0;
   position: absolute;
 }

   &:after
  {
    content:"after";
    width: 100%;
    height:20px;
    display: block;
    background: lightblue;
    left: 100%;
    top: 0;
   position: absolute;
  }
}

如何在div之前和之后显示内容

3 个答案: