html - 如何在 span 元素上添加三个点

Question

.step_one {
  background-color: #31cae3;
  color: #fbf8f8;
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  border-radius: 50%;
  padding: 10px 15px;
}
.step_two {
  background-color: #31cae3;
  color: #fbf8f8;
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  border-radius: 50%;
  padding: 10px 15px;
}
.step_three {
  background-color: #31cae3;
  color: #fbf8f8;
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  border-radius: 50%;
  padding: 10px 15px;
}
.three_steps {
  padding-bottom: 25px;
  padding-top: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="signup_start col-md-offset-1 col-md-10">
  <div class="signup_heading">
    <h1 class="signin_txt">SIGNUP WITH US IN JUST 3 STEPS !</h1>
  </div>
  <div class="col-md-12 col-sm-12 col-xs-12 text-center padd_lr three_steps">
    <div class="col-md-4 col-sm-4 col-xs-4 padd_lr">
      <span class="step_one">1</span>
      <span class="dotted">         </span>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4 padd_lr">
      <span class="step_two">2</span>
      <span class="dotted">        </span>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4 padd_lr">
      <span class="step_three">3</span>
    </div>
  </div>
</div>

如何在step1和step2、step2和step3之间加三个点？

Answer 1

其实可以用后台来解决

.three_steps{
    background: url("/img/table-tr.png") repeat-x 0 7px
}

要在文本和点之间留出一些空间，请添加填充。假设

.step_one{
  padding-right: 10px;
}
.step_two{
  padding-left: 10px;
  padding-right: 10px;
}
.step_three{
  padding-left: 10px;
}

就是这样。简单且适用于响应式布局