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

更新的例子