html - CSS list hovering not working in Google Chrome -

this question has answer here:

• how set bullet colors in ul/li html lists via css without using images or span tags [duplicate] 16 answers

i have html list such when hovering on each list item, text along bullet point 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 this, works microsoft edge, internet explorer, firefox, , safari.

google chrome, however, seems render hovering incorrectly. one, bullet points aren't changing color.

and when clicking "add bullet point" button, bullet point changes color, when does, stays way when moving cursor out. resizing window seems fix this.

so how can make html/css work should in google chrome? instinct since stuck bullet point color can correct itself, might browser bug. if so, there workarounds? if not, how can fix code?

here trick 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>