[Turtle91]

The W3Schools example in Karellen’s post lets you change the color of an html bullet, but you can also use images like so:

li::before {
  content: "•"; /* Insert content that looks like bullets */
  padding-right: 8px;
  color: blue; /* Or a color you prefer */
}


li::before {
  content: "url(../Images/bullet.png)";
  padding-right: 8px;}

As mentioned before, make sure you test on your target market’s devices/apps. Some of the more ancient devices may not support the pseudo-element ::before and you may need to provide fallback coding to cover those cases.

Also, make sure you pick a good image that works with different devices… eg. some may not look so good if it is a simple black image when the user selects night mode… you may not be able to see the bullet!!

Cheers!


EDIT:
Serves me right for trying to respond after a 12-hr work day from my phone...without testing...

Here is the code I should have posted

li::before {
  content: "";
  width:1em; height:1em;
  display: inline-block;
  background-image: url("../Images/bullet.svg");
  background-repeat:no-repeat;
  background-size:contain; 
}

Putting the image into the content line (with the quotes inside the parenthesis) works, but you can't adjust the size of the image - it is static.