CSS list-style-image প্রোপার্টি দিয়ে ইমেজকে লিস্ট মার্কার হিসেবে ব্যবহার করা

list-style-image প্রোপার্টি দিয়ে কাস্টম ইমেজকে লিস্ট আইটেমের মার্কার (বুলেট/নম্বর) হিসেবে ব্যবহার করা যায়। এটি <ul> এবং <ol> দুটোইয়ে কাজ করে।

উদাহরণ

<!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>Teams</h2>
<ul class="demo1">
  <li>India - Qualified for WordCup</li>
  <li>Australia - Qualified for WordCup</li>
  <li>England - Qualified for WordCup</li>
</ul>
<h2>Players</h2>
<ol class="demo2">
  <li>Virat Kohli</li> <li>David Warner</li> <li>Steve Smith</li>
</ol>
</body>
</html>

নোট: ইমেজের আকার নিয়ন্ত্রণের সীমিত সুযোগ রয়েছে। ভালো কন্ট্রোলের জন্য ::marker পসিউডো-এলিমেন্ট বা ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করুন।