title: How to add bullet point lines in CSS?
body: <p>I am using obsidian app for note taking.I want add bullet point lines like remnote/roam research to obsidan app. I tried the method shown in the video but it didn't work.If anyone can help I'll highly appreciate that. thanks in advance.</p>
  <p><a href="https://youtu.be/rukFr8CjzPo" rel="nofollow noreferrer">https://youtu.be/rukFr8CjzPo</a></p>
  <p><a href="https://i.stack.imgur.com/GBQvv.png" rel="nofollow noreferrer">Does anybody skillful in CSS know how to archive those navigation lines?</a></p>
  <p>I tried adding this code as a snippet but it didn't work.</p>
  <pre><code>/* BULLET POINT RELATIONSHIP LINES */
  
  .cm-hmd-list-indent .cm-tab, ul ul, ol ol { 
    position: relative; 
  }
  
  .cm-hmd-list-indent .cm-tab::before, ul ul::before, ol ol::before {
    content: '';
    border-left: 1px solid #EEE;
    position: absolute;
  }
  
  .cm-hmd-list-indent .cm-tab::before { 
    left: 0; 
    top: -5px; 
    bottom: -4px; 
  }
  
  ul ul::before, ol ol::before { 
    left: -11px; 
    top: 0; 
    bottom: 0;
  }
  </code></pre>
  <p>here is my current output so far, which is not correctly display perfectly as expected</p>
  <p><a href="https://i.stack.imgur.com/6H5PQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6H5PQ.png" alt="enter image description here" /></a></p>