これはCSS擬似セレクターのための偉大な使用事例です。この（アップデートされた）fiddleまたは以下のスニペットをご覧になり、特定の質問がある場合はお知らせください。
.modal-body{
margin: 20px;
}
.circle-wrapper {
position: relative;
}
.circle-wrapper::after {
height: 50px;
border-left: 2px solid #b5b3b5;
content: '';
display: block;
position: absolute;
left: 10px;
top: 21px;
}
.circle-wrapper::before {
height: 46px;
border-left: 2px solid #b5b3b5;
content: '';
display: block;
position: absolute;
left: 10px;
top: -44px;
}
.circle-wrapper:last-child::after {
display: none;
}
.circle-wrapper:first-child::before {
display: none;
}
.modal-body .fa {
font-size: 24px;
color: #b5b3b5;
display: inline;
vertical-align: middle;
}
.modal-body .text {
vertical-align: middle;
margin-left: 10px;
}
.inner-circle .fa {
font-size: 16px;
}
.inner-circle {
font-size: 12px;
margin-left: 50px;
position: relative;
height: 35px;
}
.inner-circle::before {
height: 22px;
border-left: 1px solid #b5b3b5;
content: '';
display: block;
position: absolute;
left: 6px;
top: 2px;
}
.inner-circle:last-child::after {
height: 18px;
border-left: 1px solid #b5b3b5;
content: '';
display: block;
position: absolute;
left: 6px;
top: 36px;
}
.inner-circle:last-child {
height: 50px;
margin-bottom: 5px;
}
.inner-contents {
position: relative;
top: 22px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css">
<div class="modal-body">
<div class="circle-wrapper">
<div class="outer-circle">
<i class="fa fa-circle-thin"></i>
<span class="text">Test code</span>
</div>
<div class="inner-circle">
<div class="inner-contents">
<i class="fa fa-circle-thin"></i>
<span class="text">Test code inner</span>
</div>
</div>
<div class="inner-circle">
<div class="inner-contents">
<i class="fa fa-circle-thin"></i>
<span class="text">Test code inner 2</span>
</div>
</div>
</div>
<div class="circle-wrapper">
<div class="outer-circle">
<i class="fa fa-circle-thin"></i>
<span class="text">Test code 2</span>
</div>
<div class="inner-circle">
<div class="inner-contents">
<i class="fa fa-circle-thin"></i>
<span class="text">Test code inner</span>
</div>
</div>
<div class="inner-circle">
<div class="inner-contents">
<i class="fa fa-circle-thin"></i>
<span class="text">Test code inner 2</span>
</div>
</div>
</div>
<div class="circle-wrapper">
<div class="outer-circle">
<i class="fa fa-circle-thin"></i>
<span class="text">Test code 3</span>
</div>
</div>
</div>
これはfine.but働いている、ありがとうございました内部ループを作成できませんでした.FAクラス内にdivを追加することは可能ですか？ – temp
内部ループを作成できないということを意味しますか？ htmlの一部を変更するアクセス権限しかありませんか？ –
いいえ、上記のイメージでは、 'プロセス'と 'トランジット'の内部に別の行とテキスト（タイムスロット付き）があります。これらを作成する必要がある場合は、 'faクラス'だから、上記のコードのために、私はそれを変更してやることができますか？ – temp