Question 293470 in Html Question posted in
Some basic documentation can be found here.

Html – How to strikethrough an li marker

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>
Tags:

2

Answers


  1. 0

    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: "0a00a00a00a0";
}
    <ul>
  <li><span>Foo</span></li>
  <li><span>Bar</span></li>
  <li><span>Foobar</span></li>
</ul>
    Login or Signup to reply.
  2. 0

    You can use list-style-position. Example:

    li {
  list-style-position: inside;
}


li:hover {
  text-decoration: line-through;
}
    <ol>
  <li>Foo</li>
  <li>Bar</li>
  <li>Foobar</li>
</ol>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search