पसूडोएलिमेंट after
पसूडोएलिमेंट after एलिमेंट के बाद
टेक्स्ट डालता है। इसका उपयोग केवल
content प्रॉपर्टी के साथ
मिलाकर किया जाता है,
जो वह टेक्स्ट सेट करती है जिसे डालना है।
सिंटैक्स
सिलेक्टर::after {
content: 'टेक्स्ट';
}
उदाहरण
आइए ऐसा करें कि जब li पर होवर किया जाए
तो उसके अंत में यह टेक्स्ट डाला जाए:
<ul>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
</ul>
li:hover::after {
content: '!!!';
}
:
उदाहरण
डाले गए टेक्स्ट पर विभिन्न स्टाइल लागू की जा सकती हैं। आइए, उदाहरण के लिए, इस टेक्स्ट को किसी रंग में रंगें:
<ul>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
<li>लिस्ट आइटम</li>
</ul>
li:hover::after {
color: red;
content: '!!!';
}
:
यह भी देखें
-
पसूडोएलिमेंट
before,
जो टैग के टेक्स्ट से पहले डालने का काम करता है -
फ़ंक्शन
attr,
जो टैग की एट्रिब्यूट की वैल्यू प्राप्त करता है -
प्रॉपर्टी
counter-increment,
जो ऑटोमैटिक नंबरिंग सेट करती है