Template:Tree list/styles.css

/* {{pp-template}} */
.treelist ul {
	padding: 0;
	margin: 0;
}

.treelist li {
	padding: 0;
	margin: 0;
	list-style: none;
    position: relative;
}

.treelist li li {
	/* @noflip */
	padding-left: 21px;
	text-indent: 0.3em;
}

/* vertical line */
.treelist li li::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
	width: 1px;
    border-left: 1px solid #808080;
}

.treelist li li:last-child::before {
    bottom: calc(100% - 0.7em);
}

/* horizontal line */
.treelist li li::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 0.7em;
    width: 11px;
    border-top: 1px solid #808080;
}

/* these lines deal with a new situation after the RemexHTML switch,
 * wherein li.treelist_emptyline inserts an additional .mw-empty-elt element before
 * the .treelist_emptyline element, causing the 1st child to become the 2nd child
 */
.treelist li.treelist_emptyline > ul > .mw-empty-elt:first-child + .treelist_emptyline::before,
.treelist li.treelist_emptyline > ul > :not(.mw-empty-elt):first-of-type::before {
    top: 0.7em;
}

.treelist li.treelist_emptyline > ul > .mw-empty-elt:first-child + .treelist_emptyline::after,
.treelist li.treelist_emptyline > ul > :not(.mw-empty-elt):first-of-type::after {
    left: 0;
    width: 21px;
}