西斯珀神谱

来自北郡Wiki
Amellan留言 | 贡献2023年2月5日 (日) 13:52的版本
跳到导航跳到搜索

测试


.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;

}