Change size of Bullet Images in CSS

Question

that's the code

list-style-image:  url("https://www.boylesoftware.com/blog/wp-content/uploads/2015/04/checkmark.png") ;

I was expecting it be of small size like that of a actual bullet but it turned out too big

Answer 1

You can fix that problem applying the below style:

 li { margin: 0; padding: 0 0 0 20px; list-style: none; background-image: url("https://www.boylesoftware.com/blog/wp-content/uploads/2015/04/checkmark.png"); background-repeat: no-repeat; background-position: left center; background-size: 15px; }

 <h1>The list-style-image Property</h1> <p>The list-style-image property replaces the list-item marker with an image:</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>

Answer 2

 <style>.check{ width: 25px; height: 25px; } </style> <p>Unordered List <img class="check" src="https://www.boylesoftware.com/blog/wp-content/uploads/2015/04/checkmark.png" alt="Alternate Text" /><a href="#">Step 1</a></p>