Имея выпуск на Добавление содержимого После Div

Question

Вы можете, пожалуйста, взгляните на этот фрагмент кода и дайте мне знать, почему я не могу добавить содержимое после DIV

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

<div> 
 
    hi 
 
</div>

Answer 1

Yo означает что-то вроде этого?

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

Однако я согласен с @ Джонатан, что отдельная разметка будет гораздо понятнее, особенно если вы планируете на интерактивности, как кнопки.