tree.css

/*-*- css-indent-offset: 2 -*-*/
/* Copyright 2022 by zrajm. License: CC BY-SA (text), GPLv2 (code) */

tree, tree node, tree :before {
  box-sizing: content-box;
  border-radius: .25em;
}
tree {
  flex-direction: column;
  align-content: flex-end;
  display: inline-block;
  vertical-align: bottom;
}
tree node {
  gap: .5em;
  display: inline-flex;
}
tree node.leaf {
  align-content: center;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
}
tree:not(.drawn) node {
  background: #0001;
}
tree.drawn node[pos=""]:before {
  background: #f80;
}
tree node {
  position: relative;
  padding-top: calc(1em + 2em);
}
tree node:before {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
tree node[pos]:before { content: attr(pos); }
tree node:before {
  content: "?";
  position: absolute; left: 0; top: 0;
  padding-top: .125em;
  height: calc((1em * var(--lead)) + .25em);
  min-width: 100%;
  font-weight: normal;
  white-space: nowrap;
}
tree {
  --lead: 1.2;
  line-height: var(--lead);
  margin: .75em .25em;
  padding: .5em .5em;
  text-align: center;
}
tree line {
  position: absolute; left: 50%; top: calc(1em * var(--lead) + .25em);
  width: 1px; height: 1px; background: #000;
  transform-origin: top center;
}
tree treecaption {
  display: block;
  padding-top: 1em;
}

/*[eof]*/