.tree {
  --tree-padding: 1.5em;
  --tree-height: 0.5em;
  --tree-border-width: 1px;
  --tree-border-color: currentColor;
  line-height: var(--tree-height);
}
 
.tree, .tree ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
 
.tree ul {
    position: relative;
    margin-top: calc(var(--tree-height) / 2);
    margin-left: var(--tree-padding);
}
.tree ul:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 0;
        border-left: var(--tree-border-width) solid var(--tree-border-color);
}
 
.tree ul li {
    position: relative;
    margin: 0;
    padding: calc(var(--tree-height) / 2) 1em;
}
 
.tree ul li:before {
    content: "";
    display: block;
    position: absolute;
    //top: var(--tree-padding);
    top: var(--tree-height);
    left: 0;
    width: calc(var(--tree-padding) / 2);
    height: 0;
    border-top: var(--tree-border-width) solid var(--tree-border-color);
}
 
.tree ul li:last-child:before {
    top: var(--tree-height);
    bottom: 0;
    height: auto;
    //background-color: #eee;
    border-left: var(--tree-border-width) solid #eee;
}