CODEWITHSUNDEEP
htmlcsssass
sanja
sanja

Reputation: 135

CSS list bullet custom image size

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>

Upvotes: 1

Views: 2055

Answers (1)

Always Helping
Always Helping

Reputation: 14570

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>

Upvotes: 4

Related Questions