CODEWITHSUNDEEP
htmlcss
C.Ronaldo
C.Ronaldo

Reputation: 611

How to make content appear before and after div

I want my content from &:before and &:after appear outside my div.first and before and after.

I thought the best way is using the css above, but it still appears inside my div, am I using the wrong method or is it something else?

Jsfiddle: https://jsfiddle.net/1uuL3sf6/1/

HTML

<div class="first">

</div>

CSS

.first
{
  width: 100%;
  height: 500px;

  background-color:red;

  &:before
  {
    content:"before";
    width: 100%;
    height: 20px;
  }

   &:after
  {
    content:"after";
    width: 100%;
    height:20px;
  }

}

Upvotes: 0

Views: 2951

Answers (3)

Banzay
Banzay

Reputation: 9470

Here is a solution: https://jsfiddle.net/e8qtoxL9/

.first
{
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background-color:lightgreen;
  position: relative;

  &:before
  {
    content:"before";
    width: 100%;
    height: 20px;
    display: block;
    background: lightblue;
    left: -100%;
    top: 0;
   position: absolute;
 }

   &:after
  {
    content:"after";
    width: 100%;
    height:20px;
    display: block;
    background: lightblue;
    left: 100%;
    top: 0;
   position: absolute;
  }
}

Upvotes: 0

insertusernamehere
insertusernamehere

Reputation: 23580

The pseudo elements :before and after do not create content before and after their parent element. They are inserted before and after its actual content.

A pseudo-element does exactly what the word implies. It creates a phoney element and inserts it before or after the content of the element that you’ve targeted.

From "Learning To Use The :before And :after Pseudo-Elements In CSS"

That's why they are always displayed inside the box of their parent.

However, as an example you can use absolute positioning to move the pseudo element out of the box:

&:before {
    content:"before";
    position: absolute;
    top: -20px;
    width: 100%;
    height: 20px;
}

But you can also float them or display them as block to achieve your desired result.

Demo

Try before buy

Upvotes: 1

Rafiqul Islam
Rafiqul Islam

Reputation: 1646

.first {
  width: 100%;
  height: 500px;
  
  background-color:red;
 } 
  .first::before
  {
    content:"before";
   
  }
  
   .first::after
  {
    content:"after";
    
  }
  
<div class="first">
</ br>  This is your first div. </ br>  
</div>

Upvotes: 0

Related Questions