CODEWITHSUNDEEP
css
Behseini
Behseini

Reputation: 6328

Having Issue on Adding Content After Div

Can you please take a look at this snippet and let me know why I am not able to add content after div

div{background:yellow; height:200px; width:200px;}
div:after {
  content: "Content";
}
<div>
  hi
</div>

Upvotes: 1

Views: 29

Answers (3)

Nick Sharp
Nick Sharp

Reputation: 1891

You can still achieve the effect that you seem to be looking for, you would just need a bit more css to actually position the new information where you want it visually.

div{background:yellow; height:200px; width:200px; position:relative}
div:after {
  content: "Content";
  position:absolute;
  bottom: -20px;
}

However, I would agree with @Jonathan, that separate markup would be far clearer, especially if you plan on interactivity like a button.

Upvotes: 1

Gacci
Gacci

Reputation: 1398

Yo mean something like this?

div{
  background:yellow; 
  height:200px; 
  width:200px;
  
  position: relative;
}
#div1:after {
  position: absolute;
  content: "Content";
  width: 100%;
  height: 100%;
  left: 100%;
  
  background: #F1F2F3;
}

#div2:after {
  position: absolute;
  content: "Content";
  width: 100%;
  height: 100%;
  left: 0%;
  top: 100%;
  
  background: #F1F2F3;
}
<div id='div1'>
  hi
</div>

<br/>

<div id='div2'>
  hi2
</div>

Upvotes: 1

Jonathan
Jonathan

Reputation: 5028

"::after" inserts after the content of an element, not after the element itself.

You need to create another element to hold the comment

div{background:yellow; height:200px; width:200px;}
div.holder::after {
  content: "Content";
}
<div class="holder">
<div>
  hi
</div>
</div>

or: https://jsfiddle.net/tg5v5v5y/

Upvotes: 0

Related Questions