Consider, we have a following bullet list items:

<ul>
   <li>Chelsea</li>
   <li>Arsenal</li>
   <li>Liverpool</li>
</ul>

To change the default bullet color of a list item, there is no built-in css way to do it instead, we can do it by tweaking the css properties like this:

ul {
  list-style: none; /* Removes the default bullets */
}

ul li::before {
  content : "\2022"; /* Adds the bullet */
  padding-right: 10px; /* creates the space between bullet, list item */
  color: blue; /* changes the bullet color*/
}

In the above css:

1. First, we removed the default bullets by setting a list-style property to none in ul.
2. We added a custom bullet using content: \2022. Where \2022 is the css unicode character of a bullet.
3. The padding-right : 10px creates the space between the bullet and the list item.
4. The color: blue changes the bullet color.

You can also increase the bullet size along with li (list-item), by adding a font-size to the ul element.

ul {
  list-style: none;
  font-size: 32px; /* increases the bullet size,list-item font size */
}

ul li::before {
  content : "\2022";
  padding-right: 10px;
  color: blue;
}