How Can I use CSS to Add an Element Below another Element?

Question

My site has many buttons, and I would like to add an image after every one. However, when I use ::after, the image gets added inside the button. How do I use CSS to add an image below the button (or at least outside it), without changing the HTML? (See the preview to see how the image appears and how I want it.)

.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>

Manjunath Siddappa · Accepted Answer · 2014-11-04 05:22:01Z

3

Fiddle

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

Use Position,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);
}

answered Nov 4, 2014 at 5:22

Manjunath Siddappa

2,1652 gold badges23 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

am-rails Over a year ago

Thanks. Is there a way to prevent it from overlapping with the text afterwards?

KiV · Accepted Answer · 2014-11-04 05:28:23Z

0

Why can't you go with jQuery. That will give you more flexibility to handle dom elements. Below is the simple code that helps you to achieve this.

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

Fiddle: http://jsfiddle.net/kiranvarthi/ovt5hzqz/

answered Nov 4, 2014 at 5:28

KiV

2,26817 silver badges18 bronze badges

2 Comments

Zach Saucier Over a year ago

Note: This can be done just about as easily in vanilla javascript as well

Jukka K. Korpela Over a year ago

Not an answer to the question asked.

Collectives™ on Stack Overflow

How Can I use CSS to Add an Element Below another Element?

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related