Bullet Point Relationship Lines - TAB vs SPACES

Custom CSS & Theme Design
1

I’m using the Custom CSS from CSS Hacks Meta posts for Bullet Point Relationship Lines

Using tabs vs 4spaces for indentation results in different types of bullet lines.
And when I use

  • 4-spcaes, sometimes the bullets don’t show-up.
  • Tab, the length of bullet line either gets overlapped with other lines or there is a gap between line when there is a line-wrap

Did anyone else face this thing?
Is there any CSS snippet that works correctly for either of these?

Below is a screenshot for reference:

Screenshot showing the use of Tabs vs Spaces for indentation in Obsidian
Screenshot showing the use of Tabs vs Spaces for indentation in Obsidian1414×413 34.8 KB

CSS I have right now:

.cm-hmd-list-indent .cm-tab,
ul ul {
  position: relative;
}
.cm-hmd-list-indent .cm-tab::before,
ul ul::before {
  content: "";
  border-left: 1px solid hsla(0, 0%, 50%, 0.3);
  position: absolute;
}
.cm-hmd-list-indent .cm-tab::before {
  left: 0;
  top: -5px;
  bottom: -4px;
}
ul ul::before {
  left: -15px;
  top: 0;
  bottom: 0;
}
2

There are user-controlled settings for tabs vs spaces in Preferences → Editor. The editor expects you to use one or the other.

3

Emacs.