如何使用CSS將元素添加到另一個元素下面？

Question

我的網站有很多按鈕，我想在之後每增加一個圖片。但是，當我使用::after時，圖像被添加裏面的按鈕。如何使用CSS在按鈕下方（或至少在其外部）添加圖像，而不更改HTML？ （請參閱預覽來查看圖像的顯示，我怎麼想的那樣。）

.button { 
 
    background-color: lightblue; 
 
    cursor: pointer; 
 
    padding: 4px; 
 
} 
 

 
.spacy::after{ 
 
    content: url(http://upload.wikimedia.org/wikipedia/commons/3/39/Cat_used_in_a_user_box_template.JPG); 
 
}

<p>Here's my HTML:</p> 
 
<span class="button spacy">Click</span> 
 
<div> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
</div> 
 

 
<p> 
 
I want it to look like this without changing the HTML: 
 
</p> 
 

 
<span class="button">Click</span> 
 
<br> 
 
<img src="http://upload.wikimedia.org/wikipedia/commons/3/39/Cat_used_in_a_user_box_template.JPG"> 
 
<div> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
</div>

Answer 1

小提琴

http://jsfiddle.net/s3bjkqj4/3/

使用Position，topleft

.spacy::after{ 
    position:relative; 
    top:45px; 
    content: url(http://upload.wikimedia.org/wikipedia/commons/3/39/Cat_used_in_a_user_box_template.JPG); 
} 

Answer 2

爲什麼你不能使用jQuery。這會給你更多的靈活性來處理dom元素。以下是可幫助您實現此目的的簡單代碼。

$(".spacy").append("<p><img src='http://upload.wikimedia.org/wikipedia/commons/3/39/Cat_used_in_a_user_box_template.JPG'></p>"); 

小提琴：http://jsfiddle.net/kiranvarthi/ovt5hzqz/