CSS & :: vor {funktioniert nicht

Question

Ich benutze Ionic2 und versuche, einen Stil anzuwenden. Ich habe eine Nachricht Feld:

und ich versuche, das Bild, um es anzuwenden:

so dass es aussieht wie es auf das Meldungsfeld verbunden ist.

Mein Problem ist, dass das Bild überhaupt nicht angewendet wird.

Ich habe die folgenden CSS. Wie Sie sehen können, ist das Bild hier definiert: background-image: url(/assets/message-you.png). Das Bild existiert an diesem Ort, denn wenn ich zum Beispiel über Firebug über das Bild blicke, ist das Bild dort.

Ich habe diese CSS aus einem Tutorial und bin mir nicht sicher, wie &::before { funktioniert.

Jede Beratung geschätzt.

.messages-page-content { 
    > scroll-content { 
    padding: 0; 
    } 

    .messages { 
    height: 100%; 
    background-color: #E0DAD6; 
    background-repeat: no-repeat; 
    background-size: cover; 
    } 

    .message-wrapper { 
    margin-bottom: 9px; 

    &::after { 
     content: ""; 
     display: table; 
     clear: both; 
    } 
    } 

    .message { 
    display: inline-block; 
    position: relative; 
    max-width: 236px; 
    border-radius: 7px; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15); 

    &.message-me { 
     float: right; 
     background-color: #DCF8C6; 

     &::before { 
     right: -11px; 
     background-image: url(/assets/message-me.png) 
     } 
    } 

    &.message-you { 
     float: left; 
     background-color: #FFF; 

     &::before { 
     left: -11px; 
     background-image: url(/assets/message-you.png) 
     } 
    } 

    &.message-you::before, &.message-me::before { 
     content: ""; 
     position: absolute; 
     bottom: 3px; 
     width: 12px; 
     height: 19px; 
     background-position: 50% 50%; 
     background-repeat: no-repeat; 
     background-size: contain; 
    } 

    .message-content { 
     padding: 5px 7px; 
     word-wrap: break-word; 

     &::after { 
     content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"; 
     display: inline; 
     } 
    } 

    .message-timestamp { 
     position: absolute; 
     bottom: 2px; 
     right: 17px; 
     font-size: 11px; 
     color: gray; 
    } 
    } 
} 

Hier ist die Ausgabe der Konsole:

Wie Sie in Firebug sehen, das Bild vorhanden ist:

Answer 1

Sie müssen content:""; zu Ihrem ::before hinzufügen -Elemente.

EDIT:

Ich sah dich schon Inhalt hatte: ""; auf deinen vor-Elementen ..