如何实现鼠标悬停时贯穿li元素及其marker的删除线效果？

默认情况下，给<li>添加text-decoration: line-through只会作用于内容部分，内置的::marker伪元素不会继承这个样式，而且无法直接给::marker添加:hover伪类（因为:hover是作用于父元素<li>的）。

以下是两种可行的解决方案：

方案一：自定义Marker（推荐） #

通过禁用默认列表标记，用计数器和伪元素模拟marker，让删除线能覆盖整个元素：

ol {
  list-style: none;
  counter-reset: list-counter;
  padding-left: 0;
}

li {
  counter-increment: list-counter;
  padding-left: 1.5em;
  position: relative;
}

li::before {
  content: counter(list-counter) ".";
  position: absolute;
  left: 0;
}

li:hover {
  text-decoration: line-through;
}

<ol>
  <li>Foo</li>
  <li>Bar</li>
  <li>Foobar</li>
</ol>

这种方法的优势是删除线是原生的text-decoration，和文本的对齐更自然，完全覆盖自定义的marker区域。

方案二：背景模拟删除线 #

如果想保留默认的marker，可以用绝对定位的背景横线模拟贯穿效果：

li {
  position: relative;
}

li:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: translateY(-50%);
}

<ol>
  <li>Foo</li>
  <li>Bar</li>
  <li>Foobar</li>
</ol>

这个方案不用修改默认marker，代码更简洁，但横线是背景元素，需要根据字体大小微调top或transform值来保证对齐准确。

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