How to create horizontal line :after for each elements?

I have a tree. Problem is when I open nested tree nodes the horizontal line has padding from the right text, because node has padding from the left.

How to set horizontal line on full width until text?

You can see my attempts on the StackBlitz

I need the same width of all horironzal line before all text like "Broccoli".

.example-tree-invisible {    display: none;  }    .example-tree ul,  .example-tree li {    margin-top: 0;    margin-bottom: 0;    list-style-type: none;    padding: 0px;  }    mat-tree-node {    position: relative;  }    mat-nested-tree-node mat-nested-tree-node {    margin-left: 20px;  }    mat-nested-tree-node mat-tree-node li:after {    left: -13px;    width: 50px;  }    mat-nested-tree-node mat-tree-node {    padding-left: 20px;  }    mat-nested-tree-node {    display: block;    position: relative;  }    mat-nested-tree-node li:after {    background-color: #ced2d6;    width: 30px;    height: 1px;    content: "";    display: block;    position: absolute;    left: 5px;    top: 23px;  }    mat-tree {    overflow: hidden;  }    mat-nested-tree-node:after {    background-color: #fff;    width: 11px;    height: 11px;    font-family: arial;    z-index: 1;    font-size: 12px;    line-height: 11px;    text-align: center;    content: "+";    color: #999;    display: block;    position: absolute;    left: 0px;    border: 1px solid #ced2d6;    top: 18px;  }    mat-nested-tree-node:before {    content: "";    height: calc(100%);    opacity: 1;    width: 1px;    background: #ced2d6;    position: absolute;    left: 6px;    border-radius: 15px;    top: -24px;  }    mat-nested-tree-node mat-tree-node li:after {    left: -16px;    width: 50px;  }

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">    <!-- This is the tree node template for leaf nodes -->    <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>      <li class="mat-tree-node">        <!-- use a disabled button to provide padding for tree leaf -->        <button mat-icon-button disabled></button>       </li>    </mat-tree-node>    <!-- This is the tree node template for expandable nodes -->    <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">      <li>        <div class="mat-tree-node">          <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name">                <!--<mat-icon class="mat-icon-rtl-mirror">                                  </mat-icon>-->              </button>         </div>        <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">          <ng-container matTreeNodeOutlet></ng-container>        </ul>      </li>    </mat-nested-tree-node>  </mat-tree>

I fixed this issue adding this:

mat-nested-tree-node mat-tree-node li:after {    left: -16px;    width: 50px;  }  

But perhaps there is a better more universal solution.

Now I faced with another issue, how to remove this line on the bottom and on the left:

https://stackoverflow.com/questions/65854018/how-to-create-horizontal-line-after-for-each-elements January 23, 2021 at 07:14AM