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;
    }
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Or JSFiddle (if you prefer that)

Answers


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

Search




Leave an answer