::之後似乎沒有做我所期待的？

Question

我可能誤解了在CSS中的::之前和::之後的功能。

我想要實現的是一個200x200px的盒子，然後在右上角會有另一個盒子（24x24）。這裏是我的本錢：

https://jsfiddle.net/xd6L3h6v/

<div id="foo">bla test</div> 

#foo { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background: green; 
} 
#foo::before { 
    position: absolute; top: 0; left: 0; 
    background: red; 
    width: 24px; 
    height: 24px; 
} 

但是，這是行不通的。當我檢查它在Firefox，我沒有看到::之前部分在Firebug的DOM檢查器。

我哪裏錯了？

謝謝！

Answer 1

你只需要添加content: '';

#foo { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: green; 
 
} 
 
#foo::before { 
 
    position: absolute; top: 0; left: 0; 
 
    background: red; 
 
    width: 24px; 
 
    height: 24px; 
 
    content: ''; 
 
}

<div id="foo">bla test</div>