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/

[See this answer](http://stackoverflow.com/a/1470223/2572316) — Topr, Dec 11 '15 at 08:15
Duplicate: http://stackoverflow.com/questions/1470214/change-bullets-color-of-an-html-list-without-using-span — Jacques Marais, Dec 11 '15 at 08:15
@Topr That would work for unordered lists, but what about ordered? — gomezfx, Dec 11 '15 at 08:17
Think this is a duplicate question have a look at this one. [one](http://stackoverflow.com/questions/5306640/how-to-set-bullet-colors-in-ul-li-html-lists-via-css-without-using-any-images-or) — McLoving, Dec 11 '15 at 08:25

Justinas · Accepted Answer · 2015-12-11T08:23:36.233

8

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>

edited Dec 11 '15 at 08:23

answered Dec 11 '15 at 08:19

Justinas

41,402
5
66
96

1

I've updated my question to be more clear. I need to change the color for both ordered and unordered lists. – gomezfx Dec 11 '15 at 08:20

score 2 · Answer 2 · edited May 23 '17 at 12:08

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.

score 2 · Answer 3 · answered Jul 14 '21 at 21:18

2

li:hover {
  color: green;
}

li::marker {
  color: red;
}

li:hover::marker {
  color: blue;
}

.decrease-spacing {
  text-indent: -8px;
}

.increase-spacing {
  text-indent: 20px;
}

<body>
  <ul>
    <li>Lorem, ipsum dolor.</li>
    <li>Lorem, ipsum dolor.</li>
    <li>Lorem, ipsum dolor.</li>
    <li class="decrease-spacing">Lorem, ipsum dolor.</li>
    <li class="increase-spacing">Lorem, ipsum dolor.</li>
  </ul>
</body>

answered Jul 14 '21 at 21:18

Duramba

389
3
8

This should be the accepted answer, since the ::marker-pseudo-element (https://developer.mozilla.org/en-US/docs/Web/CSS/::marker) is now supported in all major browsers (https://caniuse.com/?search=%3A%3Amarker)... plus the answer solved two problems in one go for me by demonstrating how to increase or decrease the space between the li's marker and its text ;-) – Mayinx Jun 30 '22 at 10:28

score 0 · Answer 4 · answered Dec 11 '15 at 08:22

0

You can do this in your css. By adding the li:before, you can change both the bullet and the text color.

li {
  list-style: none;
}
li:before {
  content: "• ";
  color: black;
}
li:hover:before {
  color: red;
}
li:hover {
  color: red;
}

answered Dec 11 '15 at 08:22

ii--L--ii

207
1
7
23

Changing list item bullet/number color on hover

4 Answers4