Home Ask Login Register

Developers Planet

Your answer is one click away!

Chuck Le Butt February 2016

Changing the bullet point color in Chrome?

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;

Or JSFiddle (if you prefer that)


Arman Ozak February 2016

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.

Post Status

Asked in February 2016
Viewed 1,652 times
Voted 8
Answered 1 times


Leave an answer

Quote of the day: live life