Cách hiển thị nội dung: sau khi nội dung bên ngoài

Question

Trong trường hợp sau, làm cách nào để tạo văn bản như vậy mà văn bản được tạo bởi :after nằm ngoài hộp span? (Nó hiện đang render bên trong, tức là nó làm cho các yếu tố span rộng hơn)

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

Tôi đoán đây là hơi tương tự như liệt kê kiểu vị trí, nơi bạn có thể chọn bên trong hoặc bên ngoài ...

Answer 1

Tôi tin rằng nội dung CSS được coi là một phần của đối tượng mà nó được hiển thị. Bạn có thể đặt đối số rằng :after phải được đặt tên là :append.

Đối với trường hợp của bạn, bạn có thể thử đặt một yếu tố thêm bên span.my:

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

Hoặc styling nội dung cụ thể.

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

Answer 2

Chỉ cần sử dụng position: absolute trong css pseudo-yếu tố của ::after {}:

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

Hãy nhớ rằng, tất nhiên, để sử dụng position: relative; (hoặc bất kỳ giá trị position khác) trên span.my yếu tố phụ huynh.

JS Fiddle demo.

Cũng nên nhớ rằng khi ::after (và ::before) pseudo-yếu tố kế thừa từ khoảng mà nó 'gắn' rằng nó sẽ kế thừa width, do đó có thể cần phải được ghi đè một cách rõ ràng trong CSS cho điều đó/những yếu tố đó.