Question

你能看看这个片段，让我知道为什么我不能在div之后添加内容

＆＃13;

div{background:yellow; height:200px; width:200px;}
div:after {
  content: "Content";
}

＆＃13;

<div>
  hi
</div>

＆＃13;

Answer 1

哟这意味着什么？

＆＃13;

div{
  background:yellow; 
  height:200px; 
  width:200px;
  
  position: relative;
}
#div1:after {
  position: absolute;
  content: "Content";
  width: 100%;
  height: 100%;
  left: 100%;
  
  background: #F1F2F3;
}

#div2:after {
  position: absolute;
  content: "Content";
  width: 100%;
  height: 100%;
  left: 0%;
  top: 100%;
  
  background: #F1F2F3;
}

＆＃13;

<div id='div1'>
  hi
</div>

<br/>

<div id='div2'>
  hi2
</div>

＆＃13;

Answer 2

您仍然可以达到您正在寻找的效果，您只需要更多的CSS来实际将新信息放置在您想要的位置。

div{background:yellow; height:200px; width:200px; position:relative}
div:after {
  content: "Content";
  position:absolute;
  bottom: -20px;
}

但是，我同意@Jonathan的说法，单独的标记会更加清晰，特别是如果您计划像按钮一样进行交互。

Answer 3

＆＃34; ::后＆＃34;插入元素的内容之后，而不是元素本身之后。

您需要创建另一个元素来保存评论

＆＃13;

div{background:yellow; height:200px; width:200px;}
div.holder::after {
  content: "Content";
}

＆＃13;

<div class="holder">
<div>
  hi
</div>
</div>

＆＃13;

或：https://jsfiddle.net/tg5v5v5y/

在Div之后添加内容的问题

3 个答案: