कैसे प्रदर्शित करें: तत्व के बाहर सामग्री के बाद

Question

निम्नलिखित मामले में, मैं इसे कैसे बना सकता हूं कि :after द्वारा उत्पन्न पाठ अवधि के बाहर है? (यह वर्तमान में, के भीतर प्रस्तुत किये यानी यह span तत्व व्यापक बनाता है)

एचटीएमएल

<span class="my">Boxtext</span> 

सीएसएस

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

मुझे लगता है कि इस सूची-शैली-स्थिति के लिए है, जहां आप कुछ इसी तरह है अंदर या बाहर चुना जा सकता है ...

Answer 1

मेरा मानना ​​है कि सीएसएस सामग्री को उस वस्तु का हिस्सा माना जाता है जिसके खिलाफ इसे प्रस्तुत किया गया था। आप तर्क दे सकते हैं कि :after को :append नाम दिया जाना चाहिए था।

अपने मामले के लिए आप span.my अंदर एक अतिरिक्त तत्व डालने की कोशिश कर सकते हैं:

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

या विशेष रूप से सामग्री स्टाइल।

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

Answer 2

बस ::after {} छद्म तत्व के सीएसएस में position: absolute का उपयोग करें:

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

निश्चित रूप से याद रखें, माता पिता span.my तत्व पर position: relative; (या किसी अन्य position मूल्य) का उपयोग करें।

JS Fiddle demo।

भी याद रखें कि जो करने के लिए यह संलग्न 'है ::after (और ::before) छद्म तत्व के रूप में अवधि से विरासत है कि यह width वारिस होगा, ताकि स्पष्ट रूप से उस के लिए सीएसएस में अधिरोहित जा करना पड़ सकता है/उन तत्वों।