ขนาดของสัญลักษณ์แสดงหัวข้อย่อยถูกกำหนดโดยเบราว์เซอร์แบบอักษรและขนาดแบบอักษร แม้ว่าบางครั้งคุณสามารถเพิ่มขนาดของแบบอักษรเพื่อเพิ่มขนาดสัญลักษณ์แสดงหัวข้อย่อยได้วิธีแก้ไขปัญหาที่ดีกว่าคือใช้รูปภาพเป็นสัญลักษณ์แสดงหัวข้อย่อย

ในการเปลี่ยนหัวข้อย่อยเป็นภาพให้ใช้ CSS ในหน้าของคุณคล้ายกับตัวอย่างต่อไปนี้

 ul {list-style: none; } ul li { background: url (// www.computerhope.com/issues/pictures/bullet.gif) ห้ามทำซ้ำบนซ้าย; พื้นหลังตำแหน่ง: 0 5px; ความสูงสาย: 1.5625; การขยาย: 0 0 4px 30px; ระยะขอบซ้าย: 1em; } 

ในโค้ด CSS ข้างต้นเราจะทำการตั้งค่า

แท็กเพื่อแสดงสไตล์รายการซึ่งจะลบสัญลักษณ์แสดงหัวข้อย่อยจากรายการที่ไม่ได้เรียงลำดับ ต่อไปเราตั้งค่า "ul li" เพื่อเปลี่ยนลักษณะที่ปรากฏของ
• แท็กที่มีอยู่ใน
  แท็ก ในบรรทัดแรกของส่วนนี้คือพื้นหลังซึ่งชี้ไปที่ภาพกระสุนที่เราใช้ในตัวอย่าง บรรทัดอื่น ๆ ทั้งหมดในกรณีนี้ให้ช่องว่างภายในและระยะรอบกระสุน

  เคล็ดลับ: คุณยังสามารถสร้างคลาส CSS หากคุณต้องการเปลี่ยนสัญลักษณ์แสดงหัวข้อย่อยเดี่ยวหรือกลุ่มสัญลักษณ์แสดงหัวข้อย่อยในรายการ

  หลังจากสร้างรหัสแล้วรายการที่ไม่ได้เรียง HTML จะใช้สัญลักษณ์แสดงหัวข้อย่อยเป็นสัญลักษณ์แสดงหัวข้อย่อย

  ตัวอย่างรหัส HTML

  ตัวอย่างสัญลักษณ์แสดงหัวข้อแรก
  ตัวอย่างสัญลักษณ์แสดงหัวข้อย่อยที่สอง
  

  ผลลัพธ์ของโค้ด HTML โดยใช้ตัวอย่าง CSS

  • ตัวอย่างสัญลักษณ์แสดงหัวข้อแรก
  • ตัวอย่างสัญลักษณ์แสดงหัวข้อย่อยที่สอง