如何使用CSS在另一个元素下添加元素?

时间:2014-11-04 05:18:07

标签: html css pseudo-element

我的网站有很多按钮,我想在每个之后添加一个图像。但是,当我使用::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>

2 个答案:

答案 0 :(得分:3)

<强>小提琴

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

使用Positiontop 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);
}

答案 1 :(得分:0)

为什么不能使用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/