CODEWITHSUNDEEP
htmlcsspseudo-element
am-rails
am-rails

Reputation: 1473

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

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>

Upvotes: 0

Views: 1914

Answers (2)

KiV
KiV

Reputation: 2273

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/

Upvotes: 0

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

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);
}

Upvotes: 3

Related Questions