CSSの組織チャートのラインコネクタの問題

Question

どのように外乱のあるラインコネクタを使用して各liの間にスペースを入れますか？私はmargin-top:20pxを適用しましたが、このスペースは回線の接続にも影響します。 liの間にスペースを追加するにはどうしたらいいですか？また、ラインコネクタにも同じものを適用できますか？

JSFIDDLE DEMO

.mobile, 
 
.mobile ul, 
 
.mobile li { 
 
    position: relative; 
 
} 
 

 
.mobile ul { 
 
    list-style: none; 
 
    padding-left: 32px; 
 
} 
 

 
.mobile li::before, 
 
.mobile li::after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: -12px; 
 
} 
 

 
.mobile li::before { 
 
    border-top: 3px solid #94a0b4; 
 
    top: 9px; 
 
    width: 12px; 
 
    height: 0; 
 
} 
 

 
.mobile li::after { 
 
    border-left: 3px solid #003B46; 
 
    height: 100%; 
 
    width: 0px; 
 
    top: 2px; 
 
} 
 

 
.mobile ul>li:last-child::after { 
 
    height: 8px; 
 
} 
 

 
.mobile #ulCollapse { 
 
    width: 320px !important; 
 
} 
 

 
.mobile li .emplist { 
 
    border: 1px solid #003B46; 
 
    border-radius: 5px; 
 
    width: 30%; 
 
    height: 35px; 
 
    transition: background-color 0.5s ease; 
 
} 
 

 
.mobile ul li .emplist:hover { 
 
    background-color: #003B46; 
 
    color: #fff; 
 
} 
 

 
.mobile li .emplist:hover~ul li .emplist { 
 
    background-color: #07575b; 
 
    color: #fff; 
 
    border: 1px solid #003B46; 
 
    border-radius: 5px; 
 
} 
 

 

 
/*Connector styles on hover*/ 
 

 
.mobile li .emplist:hover~ul li::after, 
 
.mobile li .emplist:hover~ul li::before, 
 
.mobile li .emplist:hover~ul::before, 
 
.mobile li .emplist:hover~ul ul::before { 
 
    border-color: #003B46; 
 
}

<div class="mobile"> 
 
    <ul id="ulCollapse"> 
 
    <li> 
 
     <div class="emplist"> 
 
     Parent 1 
 
     </div> 
 
     <ul> 
 
     <li> 
 
      <div class="emplist"> 
 
      child 1.1 
 

 
      </div> 
 
     </li> 
 
     <li> 
 
      <div class="emplist"> 
 
      child 1.2</div> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 

 
</div>

Answer 1

次のCSS

.mobile li{ 
    width: 100%; 
    display: table; 
    margin-top: -5px; 
} 

を追加し.mobile li .emplistにmargin: 5px 0;を追加することができます。もちろん、間のギャップをあなたが望むものに変更することができます。 .mobile liと.mobile li .emplistの両方で必ず変更してください。 JSFiddle：https://jsfiddle.net/zmsL4cxc/6/

を参照してください。

Answer 2

変更いくつかのCSSを& HTML

.mobile, 
     .mobile ul, 
     .mobile li { 
      position: relative; 
     } 

     .mobile ul { 
      list-style: none; 
      padding-left: 32px; 
     } 

     .mobile li::before, 
     .mobile li::after { 
      content: ""; 
      position: absolute; 
      left: -12px; 
     } 

     .mobile li::before { 
      border-top: 3px solid #94a0b4; 
      top: 25px; 
      width: 12px; 
      height: 0; 
      left:-12px; 
     } 

     .mobile li::after { 
      border-left: 3px solid #003B46; 
      height: 100%; 
      width: 0px; 
      top: 2px; 
     } 

     .mobile ul > li:last-child::after { 
      height: 26px; 
     } 

     .mobile #ulCollapse { 
      width: 320px !important; 
     } 
     .mobile li .emplist{padding-top:10px;} 
     .mobile li .emplist .inner{ 
      border: 1px solid #003B46; 
      border-radius: 5px; 
      width: 30%; 
      height: 35px; 
      transition: background-color 0.5s ease; 
     } 

     .mobile ul li .emplist .inner:hover { 
      background-color: #003B46; 
      color: #fff; 
     } 

     .mobile li .emplist .inner:hover ~ ul li .emplist { 
      background-color: #07575b; 
      color: #fff; 
      border: 1px solid #003B46; 
      border-radius: 5px; 
     } 


     /*Connector styles on hover*/ 

     .mobile li .emplist:hover ~ ul li::after, 
     .mobile li .emplist:hover ~ ul li::before, 
     .mobile li .emplist:hover ~ ul::before, 
     .mobile li .emplist:hover ~ ul ul::before { 
      border-color: #003B46; 
     } 


    <div class="mobile"> 
     <ul id="ulCollapse"> 
     <li> 
      <div class="emplist"> 
      <div class="inner"> 

      Parent 1 

      </div> 
      </div> 
      <ul> 
      <li> 
       <div class="emplist"> 
       <div class="inner"> 

       child 1.1 
    </div> 
       </div> 
      </li> 
      <li> 
       <div class="emplist"> 
       <div class="inner"> 
       child 1.2</div> 
       </div> 
      </li> 
      </ul> 
     </li> 
     </ul> 

    </div> 

https://jsfiddle.net/zmsL4cxc/5/