CSS removes the space between text and list style.

Question

For my ul list items, I added an image using the list-style-image property.

example of 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 (for example, "Coffee") in the li elements to relate to images - there are no spaces between the image of the list item and its description.

Answer 1

You can wrap the contents of each <li> in a <span> , and then put this range accordingly:

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

And then:

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

https://jsfiddle.net/ndpr9tnr/

Answer 2

One solution is to remove the list style and add the image in front of the li element via the :before pseudo- :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 3

It seems that you cannot directly control the space between the list-style (or brand) and whether the content is.

For this to happen, you can use the image as a 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 see the answer here.

Answer 4

You must do the CSS trick to get this.

Use

 background: url(); 

instead

 list-style-image 

property for this see fiddle link

Answer 5

I do not think you can do this with a list-style. Instead, you need to create a fake list style. Something like that:

 ul { list-style:none; } li:before { content:""; background: url('http://placehold.it/50x40'); width: 50px; display: inline-block; height: 40px; } 

Demo here: https://jsfiddle.net/9qnmxpjh/6/

Answer 6

Even if you accepted the answer, I feel that it is much more complicated than it should be.

Assuming you don't care about IE8 or lower, I suggest:

 ul { list-style-image: url('http://placehold.it/50x40'); } li { text-indent: -7px; /* also works when solely applied to the <ul> */ } 

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