Strikethrough for completed/checked tasks

Hi there. I’m trying to add strikethrough on completed tasks in the preview.
The following part didn’t work:

input[checked=true] + .task-list-item{
    text-decoration: line-through;

I’ve come up with this clumsy solution with the fixed width which I don’t really like:

.task-list-item input[checked=true]::after {
  content: "";
  width: 70vw;
  height: 0.2em;
  background: #005493;
  position: absolute;
  opacity: 0.7;
  visibility: visible;

Maybe somebody has an idea how to do this in a proper way using text-decoration: line-through;. Thanks.

1 Like

Sadly I don’t think there’s a way until we add a class to the text after the checkbox.

Ok, got it. Maybe this could be a feature request or a plugin then. I bet many would find this very convenient to cross out completed tasks in their checklists.

1 Like

no news concerning easy strikethrough…?

I’m having trouble finding an answer on that, but this css snippet makes the checked task less visible. (leaving that “line-though” part in, hoping one day it starts working)

.markdown-preview-view ul > {
  opacity: 40%;
  text-decoration: line-through;