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