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 { /*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>
আউটপুট
এটি নিম্নলিখিত আউটপুট তৈরি করবে:
