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

Firefox无法正常显示：之前和之后的伪元素

1 个答案: