हम किसी एलिमेंट के विशिष्ट भागों जैसे फर्स्ट-लेटर, फर्स्ट-लाइन या उसके पहले/बाद में कंटेंट इन्सर्ट करने को स्टाइल कर सकते हैं। इन उद्देश्यों के लिए CSS स्यूडो एलिमेंट्स का उपयोग किया जाता है।
नोट - CSS3 में CSS स्यूडो क्लासेज को स्यूडो एलिमेंट्स से अलग करने के लिए, स्यूडो एलिमेंट्स डबल-कॉलन नोटेशन का उपयोग करते हैं।
सिंटैक्स
किसी एलिमेंट पर CSS स्यूडो एलिमेंट्स का उपयोग करने के लिए सिंटैक्स निम्नानुसार है:
Selector::pseudo-element { css-property: /*value*/; }
उपलब्ध सभी CSS स्यूडो एलिमेंट्स निम्नलिखित हैं:
| क्र.सं. | स्यूडो एलिमेंट और विवरण |
|---|---|
| 1 | after यह प्रत्येक उल्लिखित एलिमेंट के कंटेंट के बाद कुछ इन्सर्ट करता है |
| 2 | before यह प्रत्येक उल्लिखित एलिमेंट के कंटेंट से पहले कुछ इन्सर्ट करता है |
| 3 | first-letter यह प्रत्येक उल्लिखित एलिमेंट के पहले अक्षर को चुनता है |
| 4 | first-line यह प्रत्येक उल्लिखित एलिमेंट की पहली लाइन को चुनता है |
| 5 | placeholder यह फॉर्म एलिमेंट्स में प्लेसहोल्डर टेक्स्ट को चुनता है |
| 6 | selection यह किसी एलिमेंट के उस भाग को चुनता है जिसे यूजर द्वारा चुना गया है |
आइए CSS स्यूडो एलिमेंट्स का एक उदाहरण देखते हैं:
उदाहरण
<!DOCTYPE html> <html> <head> <style> p::first-letter { background-color: black; } p::first-line { background-color: lightgreen; color: white; } span { font-size: 2em; color: #DC3545; } </style> </head> <body> <h2>Computer Networks</h2> <p><span>A</span> system of interconnected computers and computerized peripherals such as printers is called computer network. </p> </body> </html>
आउटपुट
आइए CSS स्यूडो एलिमेंट्स का एक और उदाहरण देखते हैं:
दूसरा उदाहरण
<!DOCTYPE html> <html> <head> <style> div:nth-of-type(1) p:nth-child(2)::after { content: " LEGEND!"; background: orange; padding: 5px; } div:nth-of-type(2) p:nth-child(2)::before { content: "Book:"; background-color: lightblue; font-weight: bold; padding: 5px; } </style> </head> <body> <div> <p>Cricketer</p> <p>Sachin Tendulkar:</p> </div> <hr> <div> <p><q>Chase your Dreams</q></p> <p><q>Playing It My Way</q></p> </div> </body> </html>
आउटपुट
