如何使用 CSS 更改悬停时缩进列表项的背景颜色？

Question

我有一个 HTML 列表，LTR 文本的每个列表项都有一个悬挂缩进。当用户悬停在列表项上时，我希望悬停列表项的整个字符串的背景。

但是由于悬挂缩进，整个字符串没有突出显示。

这是此问题的最小可重现代码示例：

.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>

如何使用 CSS 在悬停时突出显示整个字符串？

Answer 1

覆盖外部的伪元素：

.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>

喜欢下面只覆盖第一行：

.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:"0B"; /* 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>

如何使用 CSS 更改悬停时缩进列表项的背景颜色？

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

css

string

list

hover

text-indent