Strikethrough for completed/checked tasks

Feature archive
1

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;
  margin-left:16pt;
  margin-top:0.75em;
}

Obsidian v0.8.0 - Obsidian 2020-07-30 14-25-42
Obsidian v0.8.0 - Obsidian 2020-07-30 14-25-421242×178 13.8 KB

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

1 Like
2

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

3

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
4

no news concerning easy strikethrough…?

5

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 > li.task-list-item.is-checked {
  opacity: 40%;
  text-decoration: line-through;
}