Overview

When trying to style an unordered list you might be surprised to learn that there is currently no well supported way to adjust the color of, or otherwise style, the default item markers. To achieve the desired effect we will have to remove the default bullets, create our own, and finally style our custom bullets.

• Remove default bullets - We can apply the following style to our unordered list to ensure the default bullet symbol is hidden: ul { list-style: none }
• Create custom bullets - We can use the ::before pseudo element to create a new bullet before the li. We can set the content property to be the desired marker, and set a distinct color for the marker using the color property. Here's an example of such a style li::before {content: "▪"; color: salmon}
• Style custom bullets - Additional properties like padding can be applied to make sure the new custom bullet is where you want it relation to the list item content.

Result

Notes

• The ::marker pseudo-element is designed to allow direct adjustments of default marker properties, but it currently has limited browser support.