在使用背景的兩個元素之間繪製點圖

Question

我試圖畫出我的一些元素之間沒有成功的虛線;我試圖完成類似以下內容：

​​ 我已經看了一些教程寫使用::after僞元素的元素之間的線，但我沒有看到任何發生的事情。

.container { 
 
    width: 1066px; 
 
    margin: 0 auto; 
 
} 
 

 
.services { 
 
    text-align: center; 
 
    max-width: 1080px; 
 
    padding: 80px 0; 
 
    position: relative; 
 
} 
 

 
.services .step { 
 
    display: inline-block; 
 
    width: 152px; 
 
    height: 100px; 
 
    margin: 50px; 
 
    vertical-align: text-top; 
 
} 
 

 
.services .step .first { 
 
    float: right; 
 
} 
 

 
.services .icons { 
 
    background: url("https://www.icracked.com/themes/icracked/images/steps-line.png") repeat-x; 
 
}

<div class="services container"> 
 
    <div class="step first"> 
 
    <strong>PASO 1</strong> 
 
    <br> 
 
    <p>Pon el codigo postal donde te encuentres</p> 
 
    </div> 
 
    <div class="step"> 
 
    <strong>PASO 2</strong> 
 
    <br> 
 
    <p>Dinos qual es el problema</p> 
 
    </div> 
 
    <div class="step"> 
 
    <STRONG>PASO 3</STRONG> 
 
    <br> 
 
    <p>Relajate, nuestro tecnico esta de camino</p> 
 
    </div> 
 
    <div class="step last"> 
 
    <STRONG>PASO 4</STRONG> 
 
    <br> 
 
    <p>Voilà! En menos de una hora tienes el movil arreglado!</p> 
 
    </div> 
 
    <div class="icons"> 
 
    <div class="step first"> 
 
     <img src="http://via.placeholder.com/50x50" alt="" height="50" width="50"></div> 
 
    <div class="step"> 
 
     <img src="http://via.placeholder.com/50x50" alt="" height="50" width="50"></div> 
 
    <div class="step"> 
 
     <img src="http://via.placeholder.com/50x50" alt="" height="50" width="50"></div> 
 
    <div class="step last"> 
 
     <img src="http://via.placeholder.com/50x50" alt="" height="50" width="50"></div> 
 
    </div> 
 
</div>

http://jsfiddle.net/zhpmahnq/187/

Answer 1

你可以嘗試使用display: flex;，並僅在頂部或底部圖像之間的跨度創建一個虛線邊框。

.wrapper { 
    align-items: center; 
    display: flex; 
    justify-content: space-between; /* not necessary */ 
} 

.dots { 
    border-top: 1px dotted black; 
    width: 100%; 
} 

https://jsfiddle.net/zhpmahnq/191/