figure
figcaption Example DOM structure diagram
ul(class='tree')
li
code html
ul
li
code head
ul
li
code title
li
code body
ul
li
code header
ul
li
code h1
li
code p
li
code nav
ul
li
code a
li
code a
li
code a
li
code a
li
code main
ul
li
code h1
li
code article
ul
li
code h2
li
code p
li
code p
li
code aside
ul
li
code h2
li
code p
li
code p
ul
li
code a
li
code footer
ul
li
code nav
ul
li
code a
li
code a
li
code a
li
code a
figure
figcaption Example sitemap
ul(class='tree')
li
span Home
ul
li
span About us
ul
li
span Our history
ul
li
span Founder
li
span Our board
ul
li
span Brad Whiteman
li
span Cynthia Tolken
li
span Bobby Founderson
li
span Our products
ul
li
span The Widget 2000™
ul
li
span Order form
li
span The McGuffin V2
ul
li
span Order form
li
span Contact us
ul
li
span Social media
ul
li
span Facebook
p
a(href='https://medium.com/@ross.angus/sitemaps-and-dom-structure-from-nested-unordered-lists-eab2b02950cf' target='_blank') Full writeup
View Compiled
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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.