Comment faire apparaître le contenu avant et après div

Question

Je veux que mon contenu de &:before et &:after apparaissent en dehors de mes div.first et avant et après.

Je pensais que le meilleur moyen est d'utiliser le css ci-dessus, mais il apparaît toujours dans mon div, est-ce que j'utilise la mauvaise méthode ou est-ce autre chose?

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

} 

Answer 1

Les pseudo-éléments :before et after ne créent pas de contenu avant et après leur élément parent. Ils sont insérés avant et après son contenu réel.

Un pseudo-élément fait exactement ce que le mot implique. Il crée un élément bidon et l'insère avant ou après le contenu de l'élément que vous avez ciblé.

^{De "Learning To Use The :before And :after Pseudo-Elements In CSS"}

C'est pourquoi ils sont toujours affichés dans la boîte de leur parent.

---

Cependant, à titre d'exemple, vous pouvez utiliser le positionnement absolu pour déplacer l'élément pseudo de la boîte:

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

Mais vous pouvez aussi les float ou les afficher comme block pour obtenir le résultat souhaité .

Démo

Try before buy

Answer 2

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

Answer 3

Voici une 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; 
    } 
}