Sử dụng hình ảnh làm Marker danh sách trong CSS

Để dùng hình ảnh làm marker danh sách, sử dụng thuộc tính list-style-image trong CSS.

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
  list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
ol.demo2 {
  list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
</style>
</head>
<body>
<h2>Các đội</h2>
<ul class="demo1">
  <li>India - Đạt WorldCup</li>
  <li>Australia - Đạt WorldCup</li>
  <li>England - Đạt WorldCup</li>
</ul>
<h2>Các cầu thủ</h2>
<ol class="demo2">
  <li>Virat Kohli</li>
  <li>David Warner</li>
  <li>Steve Smith</li>
</ol>
</body>
</html>

Kết quả

Lưu ý:

• Hình ảnh không thể resize bằng CSS (cần file ảnh size phù hợp)
• Vị trí mặc định là outside
• Có thể dùng shorthand: list-style: url('icon.png') inside;
• Hiện đại hơn: dùng ::marker pseudo-element hoặc background-image trên li để kiểm soát size