有问题的添加内容股利

Question

后能否请您看看这个片段中，让我知道为什么我不能够DIV

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

<div> 
 
    hi 
 
</div>

Answer 1

呦意思是这样的？

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

<div id='div1'> 
 
    hi 
 
</div> 
 

 
<br/> 
 

 
<div id='div2'> 
 
    hi2 
 
</div>

Answer 2

后“添加内容::后“插入在元素的内容之后，而不是在元素本身之后。

您需要创建一个新元素，保持评论

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

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

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

Answer 3

你仍然可以做到这一点你似乎在寻找的效果，你只需要多一点的CSS实际位置，你希望它在视觉上的新信息。

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

不过，我会@Jonathan同意，单独标记会更加清晰，特别是如果你打算像一个按钮的交互性。