Firefox ne s'affiche pas correctement :before et :after pseudo-éléments

Sur tous les autres navigateur, la page web a l'air bien sauf Firefox. Même Internet Explorer! Les pseudo-éléments flottent partout dans le document, ou même ne sont pas affichés après les premiers sont. Est-il une solution de ce comportement?

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/

OriginalL'auteur Tomasz Szymanek | 2014-01-19

  1. 6

    Vous avez besoin pour positionner le positionnement absolu éléments pseudo relative à l'élément parent. Aussi, inline-block a été ajouté à contenir l'élément parent de la largeur.

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

    mise à JOUR

    Super! Bien obligé.

    OriginalL'auteur Josh Crozier