Tree

pure-CSS tree

CSS

ul.tree    {padding-left: 0}
ul.tree ul {padding-left:1em}
ul.tree li {list-style-type:none}

/* specify line style */
ul.tree li:not(:last-child),
ul.tree li::before {border: 0 solid black}

/* vertical line connecting siblings */
ul.tree li:not(:last-child) {border-left-width: 1px}
/* horizontal line connecting children to the stem */
ul.tree li::before {
    content: "";
    display: inline-block;
    position: relative;
    border-bottom-width: 1px;
    bottom: .3em; /*elevation*/
    min-width: 1ex; /*length*/
    margin-right: 2px;
}
/* vertical line connecting the last sibling
   to the sibling-connecting line */
ul.tree li:last-child::before {
    border-left-width: 1px;
    min-height: .7em; /*line-height - elevation of the horizontal line*/
}