How to change bullet color in HTML

In this article, we will try to change the unordered list bullet color using the css.

<style>
 ul {
  list-style: none;
  padding: 0;
  margin: 0;
 }
 li::before {
  content: "• ";
  color: red;
 }
</style>
  <ul>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
  <li>Yellow</li>
</ul>

1. In the above example, We hide the default list style of the <ul> element using the css list-style property and set its value to none.
   By default, all browsers set some padding to the unordered list so we have changed the padding to 0 of the <ul> element.
2. Using the css pseudo class :before, we add a dot icon and set its color to red.