figure
 figcaption Markup which would work with the current solution
 ul(class='tree')
  li
   code .bg-1
   ul
    li
     code Paragraph
     ul
      li
       code Visited link
      li
       code Fresh link
    li
     code .bg-2
     ul
      li
       code Paragraph
       ul
        li
         code Visited link
        li
         code Fresh link
      li
       code Unordered list
       ul
        li
         code List item
         ul
          li
            code Visted link
        li
           code List item
           ul
            li
              code Fresh link

figure
 figcaption Markup which would <em>not</em> work with the current solution
 ul(class='tree')
  li
   code .bg-1
   ul
    li
     code Paragraph
     ul
      li
       code Visited link
      li
       code Fresh link
    li
      code(class='error') Div tag
      ul
       code .bg-2 (no longer an immediate child of .bg-1)
       ul
        li
         code Paragraph
         ul
          li
           code Visited link
          li
           code Fresh link
        li
         code Unordered list
         ul
          li
           code List item
           ul
            li
              code Visted link
          li
             code List item
             ul
              li
                code Fresh link

body {
  font-family: Calibri, Segoe, "Segoe UI", "Gill Sans", "Gill Sans MT", sans-serif;
}

/* It's supposed to look like a tree diagram */
.tree, .tree ul, .tree li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree {
    margin: 0 0 1em;
    text-align: center;
}
.tree, .tree ul {
    display: table;
}
.tree ul {
  width: 100%;
}
    .tree li {
        display: table-cell;
        padding: .5em 0;
        vertical-align: top;
    }
        /* _________ */
        .tree li:before {
            outline: solid 1px #666;
            content: "";
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }
        .tree li:first-child:before {left: 50%;}
        .tree li:last-child:before {right: 50%;}

        .tree code, .tree span {
            border: solid .1em #666;
            border-radius: .2em;
            display: inline-block;
            margin: 0 .2em .5em;
            padding: .2em .5em;
            position: relative;
        }
        /* If the tree represents DOM structure */
        .tree code {
            font-family: monaco, Consolas, 'Lucida Console', monospace;
        }

            /* | */
            .tree ul:before,
            .tree code:before,
            .tree span:before {
                outline: solid 1px #666;
                content: "";
                height: .5em;
                left: 50%;
                position: absolute;
            }
            .tree ul:before {
                top: -.5em;
            }
            .tree code:before,
            .tree span:before {
                top: -.55em;
            }

/* The root node doesn't connect upwards */
.tree > li {margin-top: 0;}
    .tree > li:before,
    .tree > li:after,
    .tree > li > code:before,
    .tree > li > span:before {
      outline: none;
    }

.error {background: #fdd;}

figcaption {
  font-size: 1.4em;
  font-weight: bold;
}