Change size of Bullet Images in CSS-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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