CSS Pseudo-element मूल रूप से किसी एलिमेंट के विशिष्ट भागों जैसे first-letter, first-line, आदि के लिए एक सिलेक्टर है। :after और :before pseudo elements का उपयोग क्रमशः किसी एलिमेंट के बाद और पहले कंटेंट डालने के लिए किया जा सकता है।
सिंटैक्स
किसी एलिमेंट पर CSS Pseudo elements का उपयोग करने का सिंटैक्स निम्नलिखित है:
Selector::pseudo-element { css-property: /*value*/; }उदाहरण
आइए CSS Pseudo Elements का एक उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> ol, ul { list-style: none; counter-reset: demo_var2; } ul { counter-reset: demo_var1; } ol > li::before { counter-increment: demo_var2; content: counter(demo_var2, lower-roman) ") "; } li::after { counter-increment: demo_var1; content: " " counter(demo_var1) ". "; } </style> </head> <body> <ul> <li>Demo Line</li> <ol> <li>demo line</li> <li>demo line</li> </ol> <li>Demo Line</li> <ol> <li>demo line</li> <li>demo line</li> </ol> <li>Demo Line</li> </ul> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देगा:
उदाहरण
आइए CSS Pseudo Elements का एक और उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> ::-webkit-input-placeholder { /*Edge के लिए सपोर्ट */ color: blue; font-style: italic; } :-ms-input-placeholder { /*Internet Explorer के लिए सपोर्ट */ color: blue; font-style: italic; } ::placeholder { color: blue; font-style: italic; } </style> </head> <body> <h2> Sample Form </h2> <textarea id="desc" name="desc" rows="5" cols="33" placeholder="Type here"></textarea> <br /> <input type="text" name="author" placeholder="author name"> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देगा:
