CSS list hovering not working in Google Chrome

Question

I have an HTML list such that when hovering over each list item, the text along with the bullet point will change color.

The HTML

<ul>
   <li>A bullet point</li>
   <li>Another bullet point</li>
   <li id="thirdpoint"><button onclick="document.getElementById('thirdpoint').innerHTML='Third bullet point';">Add bullet point</button></li>
</ul>

The CSS

ul li:hover {
   color:red;
}

JSFiddle

The output should look like this, which works properly with Microsoft Edge, Internet Explorer, Firefox, and Safari.

Google Chrome, however, seems to render the hovering incorrectly. For one, the bullet points aren't changing color.

And when clicking the "Add bullet point" button, the bullet point sometimes changes color, but when it does, it stays that way even when moving the cursor out. Resizing the window seems to fix this.

So how I can make the HTML/CSS work as it should in Google Chrome? My instinct is that since the stuck bullet point color can correct itself, this might be a browser bug. If so, are there any workarounds? If not, how can I fix the code?

Answer 1

Here is a trick you can use

ul li:hover {
  color:red;
}
li:before {
  content: "• ";
}
ul {
  list-style: none;
}

<ul>
    <li>A bullet point</li>
    <li>Another bullet point</li>
    <li id="thirdpoint"><button onclick="document.getElementById('thirdpoint').innerHTML='Third bullet point';">Add bullet point</button></li>
</ul>