CSS 列表项目符号自定义图像大小

Question

I have a problem with the lists. I can't resize the image (list bullet). Do you have any suggestions?

Below is an example code.

 ul { list-style: none; width: 100%; } ul li::before { content: url(https://toppng.com/uploads/preview/location-png-icon-location-icon-png-free-11562933803vththezlcl.png); filter: invert(54%) sepia(69%) saturate(7490%) hue-rotate(182deg) brightness(100%) contrast(83%); } li { width: 10%; }

 <div class="benefits"> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> </ul> </div>

Answer 1

You can do this two ways Do whatever suits you best. I hope that what you wanted.

Using background property

You need to do background and your image url .

 ul { list-style: none; width: 100%; } ul li::before { filter: invert(54%) sepia(69%) saturate(7490%) hue-rotate(182deg) brightness(100%) contrast(83%); margin-right: 5px; display: inline-block; width: 16px; height: 16px; content: ""; background: url("https://toppng.com/uploads/preview/location-png-icon-location-icon-png-free-11562933803vththezlcl.png"); background-size:20px 20px; } li { display: list-item; }

 <div class="benefits"> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> </ul> </div>

Using zoom property

If you want to use contents then you zoom property

 ul { list-style: none; width: 100%; } ul li::before { content: url(https://toppng.com/uploads/preview/location-png-icon-location-icon-png-free-11562933803vththezlcl.png); filter: invert(54%) sepia(69%) saturate(7490%) hue-rotate(182deg) brightness(100%) contrast(83%); zoom: 1.5%; }

 <div class="benefits"> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> </ul> </div>