Mengubah List/Daftar Menjadi Diagram Pohon

HTML

<ul class="tree">
  <li>List item 1</li>
  <li>List item 2
    <ul>
      <li>List item 2.1</li>
      <li>List item 2.2</li>
      <li>List item 2.3</li>
      ...
      ...
    </ul>
  </li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
  ...
  ...
</ul>

CSS

ul.tree,
ul.tree ul {
  list-style:none;
  margin:0;
  padding:0;
}

ul.tree ul {
  margin-left:10px;
  background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKAQMAAABPHKYJAAAAA1BMVEWIiIhYZW6zAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1ggGExMZBky19AAAAAtJREFUCNdjYMAEAAAUAAHlhrBKAAAAAElFTkSuQmCC') repeat-y 0 100%;
}

ul.tree li {
  margin:0;
  padding:0 12px;
  font-size:14px;
  line-height:20px;
  color:#369;
  font-weight:bold;
}

ul.tree ul li {
  background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIJYVaFGwAAAARSURBVAjXY2hgQIf/GTDFGgDSkwqATqpCHAAAAABJRU5ErkJggg==') no-repeat 0 0;
}

ul.tree ul li.last,
ul.tree ul li:last-child {
  background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIIhs+gc8AAAAQSURBVAjXY2hgQIf/GbAAAKCTBYBUjWvCAAAAAElFTkSuQmCC') no-repeat 0 100%;
}

Demo

---

Referensi: Turning List into Trees

Murni CSS/Tanpa Gambar

Berikut ini adalah versi CSS yang Saya buat berdasarkan contoh di atas. Tanpa gambar, hanya menggunakan pseudo element:

CSS

ul.tree,
ul.tree ul {
  list-style:none;
  margin:0;
  padding:0;
}

ul.tree ul {
  margin-left:10px; /* indentation */
  position:relative;
}

ul.tree ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid;
}

ul.tree li {
  margin:0;
  padding:0 12px; /* indentation + 2 */
  font-size:14px;
  line-height:20px; /* default list item `line-height` */
  color:#369;
  font-weight:bold;
  position:relative;
}

ul.tree ul li:before {
  content:"";
  display:block;
  width:10px; /* same with indentation */
  height:0;
  border-top:1px solid;
  position:absolute;
  top:10px;
  left:0;
}

ul.tree ul li:last-child:before {
  background:white; /* same with body background */
  height:auto;
  top:10px; /* (line-height/2) */
  bottom:0;
}

Demo