能否仅选中<li>文本内容而非::marker？实现hover差异化变换

你原来的代码没法生效，问题出在CSS选择器逻辑上：::marker是伪元素，并非独立DOM节点，当鼠标悬停在它上面时，触发的依然是<li>元素的:hover状态，li:hover:not(li::marker)这种写法根本没法排除marker区域的hover触发。

靠谱的解决方式是给列表项的文本单独套一个内部元素（比如<span>），然后给这个内部元素加hover样式，这样只有鼠标碰到文本区域才会触发平移：

HTML结构调整 #

<li><span>你的列表项文本</span></li>

CSS样式 #

li span {
  display: inline-block; /* 行内元素默认不支持transform，需改为inline-block */
}

li span:hover {
  transform: translate(20px);
}

如果不想改HTML结构，还有个兼容性稍差的偏门办法：利用pointer-events属性让<li>本身不响应鼠标事件，仅让文本内容响应，但这个方法对纯文本节点的列表项不太友好，优先推荐套<span>的方案：

li {
  pointer-events: none;
}

li::marker {
  pointer-events: none;
}

li * {
  pointer-events: auto;
}

li:hover * {
  transform: translate(20px);
  display: inline-block;
}

内容的提问来源于stack exchange，提问作者Quentin Spronck