Hover li not covering the entire li - css

Question

As in the CSS below, when I run the project and hover over the li the color only affects the background of the text and not the entire li row.

But when I change the code to the below it covers the entire row.

.items-results li:hover {
     background-color: #000;
 }

How is this happening?

 .items-html--menu:hover { background-color: #000; }

 <ul class="items-results" id="item-results"> <li class="items-html--menu">HTML</li> <li class="items-html--menu">CSS</li> </ul>

Answer 1

The dot isn't part of the LI, so you'd have to remove the list style and use a pseudo element (ie: before)

 .items-html--menu { list-style: none; }.items-html--menu:hover { background-color: #000; }.items-html--menu:before { content: "\2022"; padding: 0 10px 0 0; }

 <ul class="items-results" id="item-results"> <li class="items-html--menu">HTML</li> <li class="items-html--menu">CSS</li> </ul>