Question

In the following case, how can I make it such that the text generated by the :after is outside the box of the span? (It currently is rendered inside, i.e. it makes the span element wider)

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

I guess this is somewhat similar to list-style-position, where you can chose inside or outside…

Answer 1

I believe CSS content is considered part of the object against which it was rendered. You could make the argument that :after should have been named :append.

For your case you can try putting an extra element inside span.my:

<span class="my"><span>Boxtext</span></span>
span.my span { ... }
span.my:after { ... }

Or styling the content specifically.

span.my:after { 
    content:            " text that is supposed to come after the box";
    background-color:   white;
    position:           absolute;
    margin-left:        10px;
}