How to display an external element: after content

Question

In the following case, how can I make the text generated by :after be outside the field? (Currently it is displayed inside, i.e. 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 assume this is somewhat similar to a list-style position where you can select inside or outside ...

Answer 1

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

In your case, you can try adding an additional element inside span.my :

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

Or specifically create content.

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

Answer 2

Just use position: absolute in the pseudo-element ::after {} css:

 span.my:after { content: " text that is supposed to come after the box"; position: absolute; left: 100%; }​ 

Remember, of course, to use position: relative; (or any other position value) in the span.my parent element.

JS Fiddle demo .

Also remember that since the pseudo-element ::after (and ::before ) inherits from the range to which it is attached, that it inherits width , so perhaps it should be explicitly redefined in CSS for these / those elements.