ไวยากรณ์
ไวยากรณ์ของ CSS ::marker selector มีดังนี้ −
Selector::marker { attribute: /*value*/; }
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดง CSS ::marker selector.
<!DOCTYPE html> <html> <head> <style> ul { list-style: circle; font-size: 1.2em; } li::marker { color: green; } </style> </head> <body> <h2><strong>TMNT</strong></h2> <ul> <li>Raphael</li> <li>Donatello</li> <li>Michaelangelo</li> <li>Leonardo</li> </ul> </body> </html>
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> ul { list-style: square; overflow: hidden; } li::marker { color: green; } li { width: 15%; margin: 2%; float: left; box-shadow: inset 2px 0px 10px lightblue; } </style> </head> <body> <ul> <li>ting</li> <li>tong</li> <li>ding</li> <li>dong</li> </ul> </body> </html>
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้