divの前後にコンテンツを表示する方法

Question

&:beforeと&:afterのコンテンツを自分のdiv.firstの外、前後に表示します。

私は上記のCSSを使用するのが最善の方法だと思っていましたが、それでも私のdivの中に表示されます。間違った方法を使用していますか？

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

疑似要素:beforeおよびafterは、親要素の前後に内容を作成しません。それらは実際の内容の前後に挿入されます。

擬似要素は、単語が示すとおり正確に行います。これは、phoney要素を作成し、それを対象とした要素の内容の前後に挿入します。

^{「Learning To Use The :before And :after Pseudo-Elements In CSS」}彼らは常に彼らの親のボックス内に表示されている理由です

。

---

しかし、例として、あなたは、箱から出して擬似要素を移動するには、絶対位置を使用することができます。

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

しかし、あなたはまた、それらをfloatしたり、所望の結果を達成するためにblockとしてそれらを表示することができます。

デモここ

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

がソリューションです：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; 
    } 
}