使用CSS3伪元素格式化图表

Question

我正在使用无序列表构建祖先图表，但我无法使其在屏幕上正确显示。我开始使用来自CSS3 Family Tree的代码，尽管名称不同，但它生成的是组织结构图而非家族树。

出于测试目的，我有HTML和CSS这样的：

.tree ul { 
 
    padding-top: 20px; 
 
    position: relative; 
 
} 
 
.tree li { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    vertical-align: top; 
 
    margin: 0 -2px 0 -2px; 
 
    text-align: center; 
 
    list-style-type: none; 
 
    position: relative; 
 
    padding: 20px 5px 0 5px; 
 
} 
 
/*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; 
 
}

<div class="tree"> 
 
    <ul> 
 
    <li> 
 
     <a href="#">Self</a> 
 
     <ul> 
 
     <li> 
 
      <a href="#">Father</a> 
 
      <ul> 
 
      <li><a href="#">Grandfather</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Grandmother</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Mother</a> 
 
      <ul> 
 
      <li><a href="#">Grandfather</a> 
 
      </li> 
 
      <li> 
 
       <a href="#">Grandmother</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

的CSS几乎是直接从CSS3家谱解除。

这将产生一个图表，看起来像这样

，但我需要它上下倒置，“自我”在底部，最早的一代在顶部。

我可以通过反转列表结构来获取反转的框，但我无法找到一种方法来修改CSS，使连接器看起来正确。

是否有修改的方式::之前和之后::伪元素得到我想要的东西？或者，我是否完全用错误的方式去解决它？

（这也是可以接受把“自我”在左，最早的一代。如果这将更好地工作的权利。）

Answer 1

你可以重新安排HTML，并与一些css调整（即交换顶部&底垫衬，换顶&底部位置，改变边界半径，以配合新的安排），它的工作原理：

.tree ul { 
 
    padding: 0 0 20px; 
 
    position: relative; 
 
} 
 

 
.tree li { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    vertical-align: bottom; 
 
    margin: 0 -2px 0 -2px; 
 
    text-align: center; 
 
    list-style-type: none; 
 
    position: relative; 
 
    padding: 0 5px 20px 5px; 
 
} 
 

 

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

 
.tree li::before, 
 
.tree li::after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 50%; 
 
    border-bottom: 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: 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 0 5px 0; 
 
    -webkit-border-radius: 0 0 5px 0; 
 
    -moz-border-radius: 0 0 5px 0; 
 
} 
 

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

 

 
/*Time to add downward connectors from parents*/ 
 

 
.tree ul ul::before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 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; 
 
}

<div class="tree"> 
 
    <ul> 
 
    <li> 
 
     <ul> 
 
     <li> 
 
      <ul> 
 
      <li><a href="#">Grandfather</a></li> 
 
      <li><a href="#">Grandmother</a></li> 
 
      </ul> 
 
      <a href="#">Father</a> 
 
     </li> 
 
     <li> 
 
      <ul> 
 
      <li><a href="#">Grandfather</a></li> 
 
      <li><a href="#">Grandmother</a></li> 
 
      </ul> 
 
      <a href="#">Mother</a> 
 
     </li> 
 
     </ul> 
 
     <a href="#">Self</a> 
 
    </li> 
 
    </ul> 
 
</div>

另外，这里是一个jsfiddle，其中包含代码播放器网站的（反转）原始树。