Changing list item bullet/number color on hover

Question

I'm trying to change a list item's color on hover, both the bullet/number and the text. I'm encountering a problem in Google Chrome where only the text is changing color. Am I missing something?

HTML:

<ul>
    <li>test</li>
</ul>

<ol>
    <li>test</li>
</ol>

CSS:

ol li:hover,
ul li:hover {
    color: red;
}

JSFiddle: https://jsfiddle.net/yf0yff1c/2/

Answer 1

You can have bullet in :before and than apply any valid CSS for that:

li {
  list-style: none;
}
li:before {
  content: "• ";
  color: black;
}
ol {
  counter-reset: item;
}
ol li {
  display: block;
}
ol li:before {
  content: counter(item)". ";
  counter-increment: item;
  color: black;
}
li:hover:before {
  color: red;
}

<ul>
  <li>HOVER ME</li>
</ul>

<ol>
  <li>HOVER ME</li>
</ol>

Answer 2

There is no direct way to do this. You need to implement a workaround like this

    ul {
      list-style: none;
    }

    ul li:before {
      content:"\2022";
      margin-right: 5px;
      font-size: 20px;
      font-weight: bold;
    }

    ul li:hover {
      color: red;
    }

    ul li:hover:before {
      color: red;
    }

<ul>
<li>test1</li>
<li>test2</li>
</ul>

Check out this question for implementing something similar for ordered list.