Fluxograma

by Rogério Saraceni

HTML

<div class="tree">
  <ul>
    <li>
      <a href="#">President Director <br />Tetsuo Nakai</a>
      <ul>
        <li>
          <a href="#">
            HR &amp; Administration<br />
            Heli Neo<br />Manager</a>
          <ul>
            <li>
              <a href="#">IT Administrator <br />Ericson Ginting<br />Assistant Manager</a>

              <ul>
                <li>
                  <a href="#">IT Engineer</a>
                </li>

                <li>
                  <a href="#" class="just-line1">lçlç</a>
                </li>
              </ul>

            </li>
          </ul>
        </li>

      </ul>
    </li>
  </ul>
</div>

CSS

/*Now the CSS*/
	* {
	  margin: 0;
	  padding: 0;
	}

	.tree {
	  width: auto;

	  margin-left: auto;
	  margin-right: auto;
	}

	.tree ul {
	  padding-top: 20px;
	  position: relative;

	  transition: all 0.5s;
	  -webkit-transition: all 0.5s;
	  -moz-transition: all 0.5s;
	}

	.tree li {
	  float: left;
	  text-align: center;
	  list-style-type: none;
	  position: relative;
	  padding: 20px 5px 0 5px;

	  transition: all 0.5s;
	  -webkit-transition: all 0.5s;
	  -moz-transition: all 0.5s;
	}

	/*We will use ::before and ::after to draw the connectors*/

	.tree li::before,
	.tree li::after {
	  content: '';
	  position: absolute;
	  top: 0;
	  right: 50%;
	  border-top: 1px solid #ccc;
	  width: 50%;
	  height: 20px;
	}

	.tree li:after {
	  right: auto;
	  left: 50%;
	  border-left: 1px solid #ccc;
	}

	/*We need to remove left-right connectors from elements without 
any siblings*/
	.tree li:only-child::after,
	.tree li:only-child::before {
	  display: none;
	}

	/*Remove space from the top of single children*/
	.tree li:only-child {
	  padding-top: 0;
	}

	/*Remove left connector from first child and 
right connector from last child*/
	.tree li:first-child::before,
	.tree li:last-child::after {
	  border: 0 none;
	}

	/*Adding back the vertical connector to the last nodes*/
	.tree li:last-child::before {
	  border-right: 1px solid #ccc;
	  border-radius: 0 5px 0 0;
	  -webkit-border-radius: 0 5px 0 0;
	  -moz-border-radius: 0 5px 0 0;
	}

	.tree li:first-child::after {
	  border-radius: 5px 0 0 0;
	  -webkit-border-radius: 5px 0 0 0;
	  -moz-border-radius: 5px 0 0 0;
	}

	/*Time to add downward connectors from parents*/
	.tree ul ul::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 50%;
	  border-left: 1px solid #ccc;
	  width: 0;
	  height: 20px;
	  margin-left: -1px;
	}

	.tree li a {
	  border: 1px solid #ccc;
	  padding: 5px 10px;
	  text-decoration: none;
	  color: #666;
	  font-family: arial, verdana, tahoma;
	  font-size: 11px;
	 ...