Template:Tree list/styles.css

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

.treeview li {
	padding: 0;
	margin: 0;
	list-style-type: none;
	list-style-image: none;
}

.treeview li li {
	background: url("https://upload.wikimedia.org/wikipedia/commons/f/f2/Treeview-grey-line.png") no-repeat 0 -2981px;
	/* @noflip */
	padding-left: 21px;
	text-indent: 0.3em;
}

.treeview li li:last-child {
	background-position: 0 -5971px
}

/* the 1st line here deals with a new situation after the RemexHTML switch,
 * wherein li.emptyline inserts an additional .mw-empty-elt element before
 * the .emptyline element, causing the 1st child to become the 2nd child
 */
.treeview li.emptyline > ul > .mw-empty-elt:first-child + .emptyline,
.treeview li.emptyline > ul > li:first-child {
	background-position: 0 9px
}

/* the dimensions of the image at the url are 21px by 5983px
 * the amount of the image that is visible adjacent to any single line is 21px by 21px
 ** positioning the image at x = 0px shows the full width of the image from 0px to 21px
 ** positioning the image at y = 9px shows the portion of the image from a height of -9px to 12px, i.e. 9 empty pixels and the first 12 image pixels
 ** positioning the image at y = -2981px shows the portion of the image from a height of 2981px to 3002px, the middle 21 pixels of the image
 ** positioning the image at y = -5971px shows the portion of the image from a height of 5971px to height+9px, i.e. the last 12 image pixels and 9 empty pixels
*/