Firefox not displaying properly :before and :after pseudo-elements

Question

On every other browser the webpage looks fine except Firefox. Even Internet Explorer! The pseudo elements float all over the document or even aren't displayed after the first ones are. Is there any solution of this behaviour?

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

You needed to position the absolutely positioned pseudo elements relative to the parent element. Also, inline-block was added to contain the parent element's width.

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

UPDATED EXAMPLE