วิธีการ - เปลี่ยนสีสัญลักษณ์แสดงหัวข้อย่อยของรายการ
เรียนรู้วิธีเปลี่ยนสีสัญลักษณ์แสดงหัวข้อย่อยสำหรับรายการด้วย CSS
เปลี่ยนสีสัญลักษณ์แสดงหัวข้อย่อย
- Adele
- Agnes
- บิลลี่
- บ๊อบ
ขั้นตอนที่ 1) เพิ่ม HTML:
สร้างรายการพื้นฐาน:
ตัวอย่าง
<ul>
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
</ul>
ขั้นตอนที่ 2) เพิ่ม CSS:
ตามค่าเริ่มต้น จะไม่สามารถเปลี่ยนสีสัญลักษณ์แสดงหัวข้อย่อยของข้อมูลในรายการได้ อย่างไรก็ตาม คุณสามารถใช้เทคนิค CSS เพื่อให้เป็นไปได้ โปรดทราบว่าคุณอาจต้องปรับแต่งให้แตกต่างออกไปเล็กน้อยหากคุณใช้เฟรมเวิร์ก CSS หรือสไตล์ชีตพิเศษ:
ตัวอย่าง
ul {
list-style: none; /* Remove default bullets */
}
ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a
bullet */
color: red; /* Change the color */
font-weight:
bold; /* If you want it to be bold */
display: inline-block; /*
Needed to add space between the bullet and the text */
width: 1em;
/* Also needed for space (tweak if needed) */
margin-left: -1em; /*
Also needed for space (tweak if needed) */
}