Как отображать содержимое :after за пределами элемента

В следующем случае, как я могу сделать так, чтобы текст, сгенерированный :after, был снаружи коробка пролета? (В настоящее время он отображается внутри, т.е. он делает элемент spanшире)

HTML

<span class="my">Boxtext</span>

CSS

span.my {
    padding:            4px 8px;
    background-color:   red;
    display:            inline-block;
    border-radius:      10px;
    margin-left:        20px;
    }   
span.my:after {
    content:            " text that is supposed to come after the box";
    }

Думаю, это чем-то похоже на list-style-position, где вы можете выбрать внутри или снаружи...