Changing the bullet point color in Chrome?

Question

It's easy to set a bullet point colour, but changing it doesn't seem to work in the latest version of Chrome (it works fine in Safari and Firefox).

For example hover the mouse over the elements in the code snippet:

    li {
      list-style-type: disc;
      list-style-position: outside;
      margin-left: 20px;
    }
    
    ul {
      transition: color .3s linear;
      color: red;
    }
    
    ul:hover {
      color: black;
    }

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Or JSFiddle (if you prefer that)

Answer 1

You may remove all list styling and add a pseudo element which will make <li> elements look like having a disc style.

li {
    list-style: none;
}

li:before {
    content: '\25CF\00a0\00a0';
    display: inline;
}

Fiddle here.