पसूडोएलिमेंट after

पसूडोएलिमेंट after एलिमेंट के बाद टेक्स्ट डालता है। इसका उपयोग केवल content प्रॉपर्टी के साथ मिलाकर किया जाता है, जो वह टेक्स्ट सेट करती है जिसे डालना है।

सिंटैक्स

cssसिलेक्टर::after {
  content: 'टेक्स्ट';
}

उदाहरण

आइए ऐसा करें कि जब li पर होवर किया जाए तो उसके अंत में यह टेक्स्ट डाला जाए:

html<ul>
  <li>लिस्ट आइटम</li>
  <li>लिस्ट आइटम</li>
  <li>लिस्ट आइटम</li>
  <li>लिस्ट आइटम</li>
  <li>लिस्ट आइटम</li>
</ul>

cssli:hover::after {
  content: '!!!';
}

Результат:

उदाहरण

डाले गए टेक्स्ट पर विभिन्न स्टाइल लागू की जा सकती हैं। आइए, उदाहरण के लिए, इस टेक्स्ट को किसी रंग में रंगें:

html<ul>
  <li>लिस्ट आइटम</li>
  <li>लिस्ट आइटम</li>
  <li>लिस्ट आइटम</li>
  <li>लिस्ट आइटम</li>
  <li>लिस्ट आइटम</li>
</ul>

cssli:hover::after {
  color: red;
  content: '!!!';
}

Результат:

यह भी देखें