Cómo mostrar: después del contenido fuera del elemento

Question

En el siguiente caso, ¿cómo puedo hacer que el texto generado por el :after esté fuera del cuadro del lapso? (En la actualidad se hace en el interior, es decir, que hace que el elemento de span más amplio)

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

supongo que esto es algo similar a la lista-style-position, donde puede elegir dentro o fuera ...

Answer 1

Creo que el contenido de CSS se considera parte del objeto con el que se procesó. Podría argumentar que :after debería haber sido nombrado :append.

Para su caso puede intentar poner un elemento adicional dentro span.my:

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

O peinar el contenido concreto.

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

Answer 2

Sólo tiene que utilizar position: absolute en el css ::after {} de pseudo-elemento:

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

Recuerde, por supuesto, utilizar position: relative; (o cualquier otro valor position) en el span.my elemento padre.

JS Fiddle demo.

Asimismo, recuerda que como el ::after (y el ::before) pseudo-elemento hereda del periodo al cual se 'une' que heredará el width, así que puede que tenga que ser anulado de forma explícita en el CSS para que el/esos elementos.