Hover li not covering the entire li - css

user_11001553 0
Viewed 302

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>

css html
1 Answers

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>

user_3084160
Related