Helen3061371 Helen3061371 - 2 months ago 5
CSS Question

CSS remove gap between the text and list-style-image

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

You can wrap the contents of each <li> in a <span> and then position that span accordingly:

<li><span>Coffee</span></li>

And then:

li span {
  position: relative;
  left: -7px;
}

https://jsfiddle.net/ndpr9tnr/

Comments