Как создать вертикальную пунктирную линию между значками (с изображением примера)

Question

После того, как вы пробовали много вещей и искали в Интернете, я все еще не могу понять, как создать подобную вертикальную пунктирную линию между значками, как показано на изображении. Кто-то знает, как это сделать? Любая помощь будет высоко ценится!!

Примечание: Это не скриншот с веб-сайта
, так что я не мог смотреть на исходный код:/

Answer 1

Вы можете добиться этого с помощью border-left.

Проверить эту скрипку: fiddle

.icon { 
 
    text-align: center; 
 
    width: 50px; 
 
    background: lightgray; 
 
    border-radius: 50%; 
 
    border: 2px solid grey; 
 
} 
 

 
.icon > i { 
 
    margin: 33% auto; 
 
} 
 

 
.dotted:after { 
 
    content:""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 50%; 
 
    height: 100%; 
 
    height: inherit; 
 
    border-left: 2px dotted lightgrey; 
 
} 
 

 
.dotted { 
 
    position: relative; 
 
    margin: 10px auto; 
 
    width: 50px; 
 
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="dotted"> 
 
    <div class="icon"> 
 
    <i class="fa fa-camera-retro"></i> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <div class="icon"> 
 
    <i class="fa fa-camera-retro"></i> 
 
    </div> 
 
</div>