如何调整以在所有点之间留有空格，如下所示？

uj5u.com热心网友回复：

就我而言，我将简单地在.cma--step-dot::before.

.cma--steps {
  margin: 10px auto;
  position: relative;
  max-width: 500px;
}

.cma--step-dot {
  display: inline-block;
  width: 15px;
  border-radius: 50%;
  height: 15px;
  background: blue;
  border: 5px solid #e8e8e8;
  position: relative;
  top: -8px;
}
.cma--step-dot:before {
  content:"";
  display:block;
  width: 24px;
  border-radius: 50%;
  height: 24px;
  background: white;
  position:absolute;
  top: -10px;
  left:-10px;
  z-index:-1;
}

.cma--step-bar {
  position: absolute;
  top: 0;
  left: 20px;
  right: 0;
  height: 3px;
  background: red;  
  width: 410px;
  z-index:-1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cma--steps">
  <div class="cma--step-bar"></div>
  <div class="row">
    <div class="col-8">
      <div>
        <span class="cma--step-dot"></span>
        <span class="cma--step-title">A</span>
      </div>
    </div>
    <div class="col-2">
      <div>
        <span class="cma--step-dot"></span>
        <span class="cma--step-title">B</span>
      </div>
    </div>
    <div class="col-2">
      <div>
        <span class="cma--step-dot"></span>
        <span class="cma--step-title">C</span>
      </div>
    </div>
  </div>  
</div>

uj5u.com热心网友回复：

尝试为点的类别添加边距。根据位置，它应该是向右或向左或两者都有边距