How to display the :after content outside element

css, html

Solution

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

Problem

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

Original source