CSS remove gap between the text and list-style-image [duplicate]

Question

For my ul list items I added a picture using list-style-image property.

example what I have: JSFiddle

ul {
  list-style-image: url('http://placehold.it/50x40');
}

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

I would like my text (e.g. "Coffee") within the li items to touch the pictures - have no gap between the list item image and its description.

Answer 1

One solution is to remove the list style and add the image before the li element via pseudo class :before

ul {
  list-style: none;
}

ul li:before {
  content: url(http://placehold.it/50x40);  
  display: inline-block;   
  vertical-align: middle;
}

<ul>
  <li>Coffee</li>
  <li>Tee</li>
  <li>Cola</li>
</ul>

Answer 2

It seems that you cannot directly control the space between the list-style-image (or bullet) and the li content.

In order to make it happen you can use the image as background

li {
  list-style-type: none;
  background-image: url('http://placehold.it/50x40');
  background-repeat: no-repeat;
  background-size: 15px 15px;
  padding-left: 15px;
}

https://jsfiddle.net/gd2rtb70/

You can also look at this answer here