如何使用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/