Firefox無法正確顯示：之前和之後：僞元素

Question

在其他所有瀏覽器上，除Firefox之外，網頁看起來都很好。即使是Internet Explorer！僞元素浮在整個文檔上，甚至在第一個元素之後不顯示。有沒有這種行爲的解決方案？

CSS

span[property="dc:date dc:created"]::before{ 
    position: absolute; 
    top: 60px; 
    content: ''; 
    display: block; 
    background-color: #005691; 
    width: 60px; 
    height: 20px; 
} 

span[property="dc:date dc:created"]::after{ 
    position: absolute; 
    top: 60px; 
    right: 0; 
    width: 0px; 
    height: 0px; 
    border-top: 20px solid #01416F; 
    border-right: 20px solid rgba(0, 0, 0, 0); 
    content: ''; 
} 

http://jsfiddle.net/LRnCM/1/

Answer 1

你需要絕對定位僞元素relative父元素位置。此外，還添加了inline-block以包含父元素的寬度。

.submitted { 
    position:relative; 
    display:inline-block; 
} 

UPDATED EXAMPLE