我的网站有很多按钮,我想在每个按钮之后添加一张图片。但是,当我使用 ::after
时,图像会添加到按钮内。如何在不更改 HTML 的情况下使用 CSS 在按钮下方(或至少在按钮外部)添加图像? (查看预览以了解图像的显示方式以及我想要的方式。)
.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>
最佳答案
fiddle
http://jsfiddle.net/s3bjkqj4/3/
使用位置
,top
left
.spacy::after{
position:relative;
top:45px;
content: url(http://upload.wikimedia.org/wikipedia/commons/3/39/Cat_used_in_a_user_box_template.JPG);
}
关于html - 如何使用 CSS 在另一个元素下方添加一个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26728205/