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);
  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?

Might work for you

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


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