Template:Tree/style.css

.hierarchy-tree {
	display: flex;
	flex-flow: column nowrap;
	height: max-content;
}
.hierarchy-tree .__item {
	position: relative; /* absolute positioning target */
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-template-areas: "emoji content";
	align-items: center;
	gap: 6px;
}
.hierarchy-tree .__item > .emoji {
	grid-area: emoji;
}
.hierarchy-tree .__item > .__content {
	grid-area: content;
}
.hierarchy-tree .hierarchy-tree .__item::after {
	position: absolute;
	top: 50%;
	left: -16px;
	width: 12px;
	height: 2px;
	display: block;
	content: "";
	background-color: var(--color-subtle, #909090);
}
.hierarchy-tree > .-tree-indent {
	padding-left: 24px;
	position: relative;
}
.hierarchy-tree > .-tree-indent::after {
	left: 6px;
	width: 2px;
	top: 2px;
	bottom: calc(0.5em - 2px);
	display: block;
	position: absolute;
	content: "";
	background-color: var(--color-subtle, #909090);
}