西斯珀神谱

测试

.tree-diagram ul {

   display: flex;
   position: relative;

   /* Reset */
   list-style-type: none;
   margin: 0;
   padding: 1rem 0.5rem 0rem 0.5rem;

}

.tree-diagram ul ul::before {

   border-right: 1px solid #d1d5db;
   content: ;

   /* Position */
   position: absolute;
   top: 0;
   right: 50%;

   /* Size */
   height: 1rem;
   width: 50%;

}

.tree-diagram li {

   padding: 1rem 0.5rem 0rem 0.5rem;
   position: relative;

   /* Center the content */
   align-items: center;
   display: flex;
   flex-direction: column;

}

.tree-diagram li::before {

   border-right: 1px solid #d1d5db;
   border-top: 1px solid #d1d5db;
   content: ;

   /* Position */
   position: absolute;
   top: 0;
   right: 50%;

   /* Size */
   height: 1rem;
   width: 50%;

}

.tree-diagram li::after {

   border-top: 1px solid #d1d5db;
   content: ;

   /* Position */
   position: absolute;
   top: 0;
   right: 0;

   /* Size */
   width: 50%;

}

.tree-diagram li:first-child::before, .tree-diagram li:last-child::after {

   /* Remove the top of border from the first and last items */
   border-top: none;

}

/* Add a root item if you want */ li.tree-diagram__root::before {

   border-right: none;

}