Come visualizzare il: after content outside element

Question

Nel seguente caso, come posso fare in modo che il testo generato dallo :after non rientri nella casella dello span? (Attualmente è reso all'interno, vale a dire che rende l'elemento span più ampio)

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

Credo che questo è in qualche modo simile a list-style-position, in cui si può scegliere all'interno o all'esterno ...

Answer 1

Credo che il contenuto CSS sia considerato parte dell'oggetto contro cui è stato reso. Si potrebbe rendere l'argomento che :after avrebbe dovuto essere denominato :append.

Per il vostro caso si può provare a mettere un elemento in più all'interno span.my:

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

o styling il contenuto specifico.

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

Answer 2

Basta usare position: absolute in css di pseudo-elemento del ::after {}:

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

Ricordate, naturalmente, per usare position: relative; (o qualsiasi altro valore position) sul genitore span.my elemento.

JS Fiddle demo.

Ricordiamo inoltre che la ::after (e la ::before) pseudo-elemento eredita dal brano a cui è 'attaccato' che sarà eredita la width, in modo che può avere bisogno di essere sovrascritto esplicitamente nel CSS per quella/quegli elementi.