CSSを使用した垂直接続線

Question

各円の間に垂直線をつなげたいと思います。 「セクション」は、垂直高さが動的です。ここで

現在SASSです：

@import '../sass/sa.common'; 
$color: $sa-gray-4; 
$colorActive: $sa-green; 
$colorComplete: $sa-green; 
.progress-indicator { 
    margin-bottom: 50px; 
    margin-top: 75px; 
    .step { 
    margin-top: 40px; 
    content: ""; 
    display: table; 
    clear: both; 
    position: relative; 
    &:first-child { 
     margin-top: 0; 
    } 
    &:last-child { 
     div { 
     &.circle { 
      &:before { 
      display: none; 
      } 
     } 
     } 
    } 
    &.active { 
     div { 
     color: $colorActive; 
     &.circle { 
      border-color: $colorActive; 
     } 
     a { 
      color: $colorActive; 
     } 
     } 
    } 
    &.complete { 
     div { 
     color: $colorComplete; 
     &.circle { 
      border-color: $colorComplete; 
      &.filled { 
      background-color: $colorComplete; 
      color: $sa-white; 
      } 
     } 
     } 
    } 
    div { 
     color: $color; 
     display: table-cell; 
     float: left; 
     padding-top: 2px; 
     font-size: 16px; 
     font-weight: bold; 
     vertical-align: middle; 
     &.circle { 
     height: 30px; 
     width: 30px; 
     text-align: center; 
     border: 2px solid $color; 
     border-radius: 50%; 
     &:before { 
      content: ""; 
      position: absolute; 
      z-index: 1; 
      margin-top: 26px; 
      left: 13px; 
      border: 1px solid $sa-gray-4; 
      height: 125%; 
     } 
     } 
     &.text { 
     padding-left: 10px; 
     padding-top: 5px; 
     ul { 
      margin: 0; 
      margin-top: 15px; 
      padding: 0; 
      list-style-type: none; 
      li { 
      a { 
       display: block; 
       margin-top: 5px; 
       &:first-child { 
       margin-top: 0; 
       } 
      } 
      } 
     } 
     } 
    } 
    } 
} 

CSS：

<style type="text/css">@charset "UTF-8"; 
.btn.btn-green { 
    background-color: #80b241; 
    color: #ffffff; } 
    .btn.btn-green:hover { 
    background-color: #88bc47; } 

.btn.btn-gray-1 { 
    background-color: #595959; 
    color: #e7e5e1; } 
    .btn.btn-gray-1:hover { 
    background-color: #666666; } 

.label.label-green { 
    background-color: #80b241; 
    color: #242424; } 

.label.label-gray-1 { 
    background-color: #595959; 
    color: #ffffff; } 

.btn.btn-green { 
    background-color: #80b241; 
    color: #ffffff; } 
    .btn.btn-green:hover { 
    background-color: #88bc47; } 

.btn.btn-gray-1 { 
    background-color: #595959; 
    color: #e7e5e1; } 
    .btn.btn-gray-1:hover { 
    background-color: #666666; } 

.label.label-green { 
    background-color: #80b241; 
    color: #242424; } 

.label.label-gray-1 { 
    background-color: #595959; 
    color: #ffffff; } 

.progress-indicator { 
    margin-bottom: 50px; 
    margin-top: 75px; } 
    .progress-indicator .step { 
    margin-top: 40px; 
    content: ""; 
    display: table; 
    clear: both; 
    position: relative; } 
    .progress-indicator .step:before { 
     content: ""; 
     position: absolute; 
     z-index: 1; 
     margin-top: 26px; 
     left: 13px; 
     border: 1px solid #ADABA6; 
     height: 125%; } 
    .progress-indicator .step:first-child { 
     margin-top: 0; } 
    .progress-indicator .step:last-child:before { 
     display: none; } 
    .progress-indicator .step.active div { 
     color: #80b241; } 
     .progress-indicator .step.active div.circle { 
     border-color: #80b241; } 
     .progress-indicator .step.active div a { 
     color: #80b241; } 
    .progress-indicator .step.complete div { 
     color: #80b241; } 
     .progress-indicator .step.complete div.circle { 
     border-color: #80b241; } 
     .progress-indicator .step.complete div.circle.filled { 
      background-color: #80b241; 
      color: #ffffff; } 
    .progress-indicator .step div { 
     color: #ADABA6; 
     display: table-cell; 
     float: left; 
     padding-top: 2px; 
     font-size: 16px; 
     font-weight: bold; 
     vertical-align: middle; } 
     .progress-indicator .step div.circle { 
     height: 30px; 
     width: 30px; 
     text-align: center; 
     border: 2px solid #ADABA6; 
     border-radius: 50%; } 
     .progress-indicator .step div.text { 
     padding-left: 10px; 
     padding-top: 5px; } 
     .progress-indicator .step div.text ul { 
      margin: 0; 
      margin-top: 15px; 
      padding: 0; 
      list-style-type: none; } 
      .progress-indicator .step div.text ul li a { 
      display: block; 
      margin-top: 5px; } 
      .progress-indicator .step div.text ul li a:first-child { 
       margin-top: 0; } 

.category-selector { 
    margin-top: 30px; } 
    .category-selector .header { 
    border-bottom: 2px solid #80b241; } 
    .category-selector .header:before, .category-selector .header:after { 
     content: " "; 
     display: table; } 
    .category-selector .header:after { 
     clear: both; } 
    .category-selector .section-container:before, .category-selector .section-container:after { 
    content: " "; 
    display: table; } 
    .category-selector .section-container:after { 
    clear: both; } 
    .category-selector .section-container .section { 
    float: left; 
    height: 400px; 
    min-width: 150px; 
    overflow-y: scroll; } 
    .category-selector .section-container .section .item { 
     border-bottom: 1px solid #80b241; 
     cursor: pointer; 
     padding: 5px 10px 5px 5px; } 
     .category-selector .section-container .section .item:last-child { 
     border: 0; } 
     .category-selector .section-container .section .item.active { 
     background-color: #80b241; 
     color: #ffffff; } 
</style> 

とマークアップ：

<div class="row"> 
    <div class="col-lg-3"> 
     <div class="progress-indicator"> 
      <div class="step"> 
       <div class="circle">1</div> 
       <div class="text">Select Category</div> 
      </div> 
      <div class="step active"> 
       <div class="circle">2</div> 
       <div class="text"> 
        Fill Out Listing 
        <ul> 
         <li> 
          <a href="#">Vital Fields</a> 
          <a href="#">Image Url</a> 
          <a href="#">Dimensions</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
      <div class="step"> 
       <div class="circle">3</div> 
       <div class="text">Bulk Options</div> 
      </div> 
      <div class="step"> 
       <div class="circle">4</div> 
       <div class="text">More Options</div> 
      </div> 
     </div> 

     <div class="text-center"> 
      <button class="btn btn-default" style="margin-bottom: 10px;"> 
       SAVE AS DRAFT 
      </button> 
      <button class="btn btn-gray-1"> 
       MOVE TO PUBLISH QUEUE 
      </button> 
     </div> 
    </div> 
    <div class="col-lg-6"> 
     <div class="category-selector"> 
      <div class="header"> 
       <div class="pull-left"> 
        <h4>Select a Category</h4> 
       </div> 
       <div class="pull-right"> 
        <button class="btn btn-green">Next</button> 
       </div> 
      </div> 
      <div class="section-container"> 
       <div class="section"> 
        <div class="item" [ngClass]="{active: selectedCategory && category.id === selectedCategory.id}" *ngFor="let category of topLevelCategories" (click)="getSubCategories(category)"> 
         {{category.displayName}} 
        </div> 
       </div> 
       <div class="section" *ngIf="subCategories && subCategories.length > 0"> 
        <div class="item" [ngClass]="{active: selectedSubCategory && subCategory.id === selectedSubCategory.id}" *ngFor="let subCategory of subCategories" (click)="getFields(subCategory)"> 
         {{subCategory.displayName}} 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="col-lg-3"> 
     Side Nav/Slide In 
    </div> 
</div> 

Answer 1

display:tableの要素の表示がすべて::beforeになっているブラウザはありません。 （私はFFでこれを体験していますか？ - Chromeでは表示されています）。

1. どちらかが... display:flexとdisplay: table-celldisplay: blockとして
2. をdisplay:tableを交換...または適切html要素（divを？）を使用する代わりに、ライン用の擬似要素：2つの可能な修正があります。あなたが役に立つかもしれません

その他の注意事項：

• {N}は.circleと40pxの実際の高さ（上マージンの間pxの差であるheight:calc(100% + {N}px)からz-index
.step::beforeからの変更 height:125%を削除 .step）。このテクニックを使用すると、正確な線のサイズを制御し、円の間のギャップをピクセルまで合わせることができるため、余分な線の長さを隠す必要はありません。

上記は意味があり、役立ちます。 autoprefixを忘れないでください。

Answer 2

ような何か：

.step { 
    position: relative; 
    &:after { 
     content: ""; 
     position: absolute; 
     top: 0; 
     left: 30px; // magic number, try until you get the right positioning 

     width: 1px; 
     height: 100%; 

     border-left: 2px solid $any-color-you-like; 
    } 
} 

必要に応じて調整してください。