jquery - Dynamically changing the color of an element li doesn't change the color of the bullet point -

in chrome (version 45.0.2454.101 m) if add class list element change color, bullet point color updated when window repainted (resized)

$("#a").click(function() {         $("#a").addclass('blue');  });

ul li {      color: red;      list-style-type: disc;      margin-left: 2em;  }  .blue {      color: blue;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <ul>      <li id="a">a</li>      <li id="b">b</li>      <li id="c">c</li>  </ul>

is bug in chrome can solved code? (or bug @ all?)

probably bug not rely on standard disc elements.

you use css ::before pseudo-element instead. more configurable , under control.

$("#a").click(function() {         $("#a").addclass('blue');  });

ul li {      color: red;      list-style-type: none;      margin-left: 2em;  }    ul li::before {      content: "•";  }    .blue {      color: blue;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <ul>      <li id="a">a</li>      <li id="b">b</li>      <li id="c">c</li>  </ul>