CSS list bullet custom image size

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>

The image cannot be resized for pseudo-elements. https://css-tricks.com/almanac/selectors/a/after-and-before/ — Mr T, Jul 01 '20 at 08:31
@MrT - incorrect. `content` assets cannot be resized, regardless of presence of `pseudo element`. If `background` property was used, it would have allowed resizing. — vsync, Jul 01 '20 at 08:38

Always Helping · Accepted Answer · 2020-07-02T00:11:33.340

4

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>

edited Jul 02 '20 at 00:11

answered Jul 01 '20 at 08:30

Always Helping

14,316
4
13
29

You've already used the shorthand property `background`, there is no reason to continue writing `background-size` after it, but logic demands it written inside the shorthand property `background` – vsync Jul 01 '20 at 08:33
You removed `background-size` thus making the answer incorrect, since you must resize the image to fit the container. [how to use background-size shorthand](https://stackoverflow.com/q/7864448/104380). In this case the image is just *single-color*, but if it was a *user avatar*, it wouldn't be fully visible. – vsync Jul 01 '20 at 08:35
Yes, the size of the image has changed, but if I write a longer text in the lists, for example, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, the text breaks into a new line. – sanja Jul 01 '20 at 08:38
The solution with the "zoom" attribute is great! Thanks a lot! – sanja Jul 01 '20 at 08:39
@sanja - because of `li { width: 10%; }` – vsync Jul 01 '20 at 08:39
1

@sanja yes it will break because you have width 10% on `li` try now. I have update the asnwer. – Always Helping Jul 01 '20 at 08:39
`background-size` should be inside the `background` shorthand and it's value should be [`cover`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) – vsync Jul 01 '20 at 08:40
1

the OP likes the zoom answer so i will update the answer accordingly. Thanks @vsync – Always Helping Jul 01 '20 at 08:41
@vsync yes, that needs to change li { width: 40%; }. But the solution with "zoom" is much simpler. Thank you! – sanja Jul 01 '20 at 08:46
@sanja Glad to hear that. Thanks :) – Always Helping Jul 01 '20 at 08:47
it is irrelevant what the OP prefers because this website is for countless others with similar issue. helping as many as possible out-weights helping a single-OP. `zoom` property should never be used because it is [none-standard](https://developer.mozilla.org/en-US/docs/Web/CSS/zoom) and is a very unwanted hack, instead of easily solving it with `background-size`. – vsync Jul 01 '20 at 08:56

CSS list bullet custom image size

1 Answers1