treeview.css

by Laurens Maneschijn

HTML

<div class="treeview">
  <ul>
    <li>
      treeview
      <ul>
        <li class="treeview-header">header</li>
        <li>midline</li>
        <li>midline
          <ul>
            <li>topline</li>
            <li>midline</li>
            <li>lowline</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<hr>

<ul class="treeview">
  <li>
    treeview
    <ul>
      <li class="treeview-header">header</li>
      <li>midline</li>
      <li>midline
        <ul>
          <li>topline</li>
          <li>midline</li>
          <li>lowline</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS

/*
div.treeview
	ul
		li
			ul
			|	li.treeview-header (vertical line, but no horizontal line)
			|-	li
			|-	li
			|_	li
					ul
					|-	li
					|_	li
*/
.treeview                                                {margin-top:0.3em}
.treeview .treeview-header                               {padding-left:3px;font-weight:bold}
.treeview .treeview-header:last-child                    {border-color:#636363 !important;border-left-style:dotted}
.treeview .treeview-header:not(:last-child):before       {content:none}
.treeview .treeview-header:last-child:before             {border-bottom:0}
.treeview ul,.treeview li                                {margin:0;padding:0;list-style-type:none;list-style-image:none}
.treeview li li                                          {position:relative;padding-left:13px;margin-left:7px;border-left:1px solid #636363}
.treeview li li:before                                   {content:"";position:absolute;top:0;left:-1px;width:11px;height:11px;border-bottom:1px solid #636363}
.treeview li li:last-child:not(.treeview-continue)       {border-color:transparent}
.treeview li li:last-child:not(.treeview-continue):before{border-left:1px solid #636363;width:10px}