使用背景pic在两个元素之间画点

Question

我试图在我的某些元素之间画一条虚线而没有成功;我试图完成以下内容：

我已经看过一些教程，使用::after伪元素在元素之间写一条线，但我看不到发生的任何事情。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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/