How to strikethrough an li marker

Issue

I'm trying to strikethrough an li element including the li marker itself. On hover I want to add a strikethrough that spans through the entire li element including the li::marker itself.

Whenever I add strikethrough to the <li> element it only adds strikethrough to the content and ignores the li::marker.

I've tried applying the striketrhough on the marker with the code below, but that didn't work.

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

---

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

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

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

Solution

UPDATE

🚨 DO NOT USE THIS SOLUTION!!! 🚨

As I expected, a much better, more elegant solution exists than the trash I provided below; check out LS_'s answer on this question. In my opinion, his answer deserves to be marked as "selected".

---

(Original answer)

What I've provided below is a hacky, absolutely filthy solution that achieves the result by wrapping the content in a relatively positioned <span>, and on giving it extra leading spaces on hover while simultaneously adjusting it's position to the left. I can't even promise it will work consistently across platforms. It's gross, and I pray that somebody provides a better solution and that don't have to use this approach.

li span {
  position: relative;
}

li:hover span {
  text-decoration: line-through;
  left: -1em;
}

li:hover span::before {
    content: "\00a0\00a0\00a0\00a0";
}

<ul>
  <li><span>Foo</span></li>
  <li><span>Bar</span></li>
  <li><span>Foobar</span></li>
</ul>

Answered By - Alexander Nied