Template:Tree list/sandbox/styles.css

/* {{pp-template}} */

/* don't draw blank space in front of an infobox, see [[Template talk:Tree list#Tree list breaks clicking links in infoboxes]] */
div.treelist {
	width: max-content;
}

.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;
}