एक सीएसएस छद्म-तत्व मूल रूप से एक तत्व के विशिष्ट भागों जैसे कि प्रथम-अक्षर, पहली-पंक्ति, आदि के लिए एक चयनकर्ता है:बाद में और:छद्म तत्वों से पहले क्रमशः एक तत्व के बाद और पहले सम्मिलित करने के लिए उपयोग किया जा सकता है।
सिंटैक्स
एक तत्व पर CSS छद्म तत्वों का उपयोग करने के लिए सिंटैक्स निम्नलिखित है -
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 { /*Support for Edge */
color: blue;
font-style: italic;
}
:-ms-input-placeholder { /*Support for 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> आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
