html - 如何在 CSS 中叠加形状并将文本与其中心对齐？

Question

.grcircle {
  height: 20px;
  width: 20px;
  background-color: green;
  border-radius: 50%;
}

.recircle {
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 50%;
}

.orcircle {
  height: 20px;
  width: 20px;
  background-color: orange;
  border-radius: 50%;
}

.yecircle {
  height: 20px;
  width: 20px;
  background-color: yellow;
  border-radius: 50%;
}

.blcircle {
  height: 20px;
  width: 20px;
  background-color: blue;
  border-radius: 50%;
}

.prcircle {
  height: 20px;
  width: 20px;
  background-color: purple;
  border-radius: 50%;
}

.bar {
  height: 40px;
  width: 5px;
  background-color: grey;
  border-radius: 10px;
}

.grcircle,
text {
  display: inline-block;
  vertical-align: center;
}

<div class="grcircle"></div><text>hhi</text>
<div class="bar"></div>
<div class="recircle"></div>
<div class="bar"></div>
<div class="orcircle"></div>
<div class="bar"></div>
<div class="yecircle"></div>
<div class="bar"></div>
<div class="blcircle"></div>
<div class="bar"></div>
<div class="prcircle"></div>
<div class="bar"></div>

输出:



我希望小条与圆圈的中心对齐，并让它们被圆圈覆盖，就像连接一样。

另外，我想让右边的文字与圆心对齐。

Answer 1

而另一个答案是 transform: translateX();将是一个快速解决方案，我建议您重新考虑整个标记。

如下所示:(请参阅此 CodePen 的现场演示)

<div class="circle green">hhi</div>
<div class="circle red"></div>
<div class="circle orange"></div>
<div class="circle yellow"></div>
<div class="circle blue"></div>
<div class="circle purple"></div>

.circle {
  position: relative;
  margin-bottom: 40px;
  height: 20px;
}

.circle::before {
  content:"";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 5px;
}

.circle::after {
  position: absolute;
  content: '';
  left: 8px;
  top: 20px;
  width: 5px;
  background: grey;
  height: 40px;
}
.green::before {
  background-color: green;
}

.red::before {
  background-color: red;
}

.orange::before {
  background-color: orange;
}

.yellow::before {
  background-color: yellow;
}

.blue::before {
  background-color: blue;
}

.purple::before {
  background-color: purple;
}

我所做的是:
1.清理HTML，让不必要的 div s 和 text元素被消除
1.重用CSS类，使重复的​​样式声明得到统一
1.使用 ::before和 ::after圆形和条形连接器样式的伪元素。