CSS & :: before {не работает

Question

Я использую Ionic2 и пытаюсь применить стиль. У меня есть окно с сообщением:

и пытаюсь применить этот образ к нему:

так, что он выглядит, как он присоединился к блоку сообщения.

Моя проблема заключается в том, что изображение вообще не применяется.

У меня есть следующий css. Как вы можете видеть, изображение определено здесь: background-image: url(/assets/message-you.png). Изображение существует в этом месте, потому что, если я нахожу его поверх Firebug, например, изображение есть.

Я получил этот css из учебника и не знаю, как работает &::before {.

Любые рекомендации оцениваются.

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

Вот консольный вывод:

Как вы можете видеть в Firebug, изображение существует:

Answer 1

Вам нужно добавить content:""; к вашему ::before -элементов.

EDIT:

Я видел, как вы уже содержание: ""; на ваших до-элементах.