Bullet Lines in CSS for Checkboxes

Any tips on how to adjust the bullet lines for check-boxes in preview mode? They don’t align correctly. I don’t mind if they were removed just for the checkboxes if that makes it any easier.

I’ve been using the following code by death_au with some slight adjustments to the positioning & colour.

.cm-hmd-list-indent .cm-tab,
ul ul {
  position: relative;
}

/* Lines in editor */
.cm-hmd-list-indent .cm-tab::before,
ul ul::before {
  content: "";
  border-left: 2px solid var(--bold-color);
  /*rgba(20,122,255,0.3);
*/
  position: absolute;
}

.cm-hmd-list-indent .cm-tab::before {
  left: 4.5px;
  top: -5px;
  bottom: -1.45px;
}

ul ul::before {
  left: -15px;
  top: 0;
  bottom: 0;
}
1 Like

@death.au Thoughts on this?

@s-kyy
Might work for you

/* tasklist (preview) indentation lines correction */ .contains-task-list::before { left: 10px ; }

3 Likes

That works perfectly thanks!
It looks a bit cramped so I’ll try to space them out a bit.

oh this is awesome! :clap:

1 Like