ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
ul {
list-style: none;
}
ul li{
font-size: 20px;
font-weight: 500;
}
ul li::before {
content: "\2022";
color: rgb(86, 18, 117);
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
</style> </head> <body> <h1>ตัวอย่างเปลี่ยนสีบูลล็อตรายการ</h1> <ul> <li>อูฐ</li> <li>แพะ</li> <li>ยีราฟ</li> <li>สิงโต</li> </ul> </body> </html>
ผลลัพธ์
รายการที่มีบูลล็อตสีม่วงแทนสีดำปกติ โดยใช้ pseudo-element ::before
