Drawing dots between two elements using background pic - html

Question

I'm trying to draw a dotted line between some of my elements without success; I'm trying to accomplish something like the following:
I've looked at a few tutorials to write a line between the elements using the ::after pseudo-element, but I don't see anything happening.
.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

You could try using display: flex; and creating a dotted border on only the top or bottom of a span between images.
.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/