Tạo cây gia phả (Family Tree) bằng CSS3

Hướng dẫn tạo cây gia phả (Family Tree) bằng CSS3, các bạn sẽ tìm hiểu sâu hơn về cách selector của CSS3 cùng hiệu ứng khi hover vào từng phần tử.

HTML


<div class="tree">
  <ul>
    <li>
      <a href="#">Parent</a>
      <ul>
        <li>
          <a href="#">Child</a>
          <ul>
            <li>
              <a href="#">Grand Child</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Child</a>
          <ul>
            <li>
              <a href="#">Grand Child</a>
            </li>
            <li>
              <a href="#">Grand Child</a>
              <ul>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
                <li>
                  <a href="#">Great Grand Child</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">Grand Child</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS


* {
  margin: 0; padding: 0;
}
.tree{
  width:900px; margin:50px auto;
}
.tree ul {
  padding-top: 20px; position: relative;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;
}
.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;
}
.tree li:only-child::after, .tree li:only-child::before {
  display: none;
}
.tree li:only-child{ 
  padding-top: 0;
}
.tree li:first-child::before, .tree li:last-child::after{
  border: 0 none;
}
.tree li:last-child::before{
  border-right: 1px solid #ccc;border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
  border-radius: 5px 0 0 0;
}
.tree ul ul::before{
  content: '';position: absolute; top: 0; left: 50%;border-left: 1px solid #ccc;width: 0; height: 20px;
}
.tree li a{
  border: 1px solid #ccc;padding: 5px 10px;text-decoration: none;color: #666;font-family: arial, verdana, tahoma;
  font-size: 11px;display: inline-block;border-radius: 5px;transition: all 0.5s;
}
.tree li a:hover, .tree li a:hover+ul li a {
  background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
.tree li a:hover+ul li::after, .tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, .tree li a:hover+ul ul::before{
  border-color:  #94a0b4;
}