How to change the background color of an indented list item on hover using CSS?

Question

I have an HTML list and each list item of LTR text has a hanging indent. When the user hovers over a list item, I want the background of the entire string of the list item to be hovered.

But because of the hanging indent, the entire string does not get highlighted.

Here is a minimum reproducible code example of this issue:

.test {
  margin-left: 5em;
  width: 5em;
  text-indent: -2em;
  list-style-type: none;
}
.test:hover {
  background: lime;
}

<li class="test">hello world this is a test</li>

How can CSS be used to highlight the entire string on hover?

Answer 1

a pseudo element to cover the outside part:

.test {
  margin-left: 5em;
  width: 5em;
  text-indent: -2em;
  list-style-type: none;
  position:relative;
  z-index:0;
}
.test:hover {
  background: lime;
}
.test:hover::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  right:100%;
  width:2em;
  background: inherit;
}

<li class="test">hello world this is a test</li>

Like below to cover only the first line:

.test {
  margin-left: 5em;
  width: 5em;
  text-indent: -2em;
  list-style-type: none;
  position:relative;
  z-index:0;
}
.test:hover {
  background: lime;
}
.test:hover::before {
  content:"\200B"; /* an invisible character to define the height */
  position:absolute;
  z-index:-1;
  top:0;
  right:100%;
  width:2em;
  background: inherit;
}

<li class="test">hello world this is a test</li>