CSS Pseudo-element โดยพื้นฐานแล้วจะเป็นตัวเลือกสำหรับส่วนเฉพาะขององค์ประกอบ เช่น อักษรตัวแรก บรรทัดแรก เป็นต้น :after และ :before องค์ประกอบหลอกสามารถใช้เพื่อแทรกหลังและก่อนองค์ประกอบตามลำดับ
ไวยากรณ์
ต่อไปนี้เป็นรูปแบบการใช้ CSS Pseudo องค์ประกอบ -
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>
ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -