title: Family Tree CSS
body: <p>Is there a way to get a child element to follow its parent?</p>
  <p>The problem is that if there is only one child and the parent has a huge text to it, the position of the connector becomes really bad.
  How can I fix it?</p>
  <p><a href="https://jsfiddle.net/yau5juka/" rel="nofollow noreferrer">Fiddle demo</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {margin: 0; padding: 0;}
  
  .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;
  }
  
  .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;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;    
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
  }
  
  /*Time for some hover effects*/
  /*We will apply the hover effect the lineage of the element also*/
  .tree li a:hover, .tree li a:hover+ul li a {
      background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
  }
  /*Connector styles on hover*/
  .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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--
  We will create a family tree using just CSS(3)
  The markup will be simple nested lists
  --&gt;
  &lt;div class="tree"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Parent sdkfjnsdkfsdnfksdfnskfns&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Child&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>