如何在下面带有文字的水平响铃列表中

如何解决如何在下面带有文字的水平响铃列表中

我正在尝试使用HTML / CSS实现以下元素：

我一直在努力弄清楚如何使文本显示在圆环下方。我已经尝试过使用SVG数据网址制作铃声，例如：

SVG：

<svg aria-hidden='true' focusable='false'>
  <circle cx="25" cy="25" r="20" stroke="black" stroke-width="2" fill="transparent" />
</svg>

使用https://yoksel.github.io/url-encoder/

编码

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false'%3E%3Ccircle cx='25' cy='25' r='20' stroke='black' stroke-width='2' fill='transparent' /%3E%3C/svg%3E ");

我看过一些示例，最接近的示例之一是https://material.angular.io/components/stepper/examples处的Angular Material Stepper，但是我对如何开始制作此元素感到困惑。对于HTML，我认为遵循以下代码段的内容应该没问题。

<ul class="ratings">
    <li>Gering</li>
    <li>Mittel</li>
    <li class="active">Hoch</li>
    <li>Sehr hoch</li>
</ul>

对于上下文来说，它应该成为Angular Web应用程序中不可交互的显示元素。根本不需要IE支持，因此使用现代CSS（我正在使用SCSS）的解决方案就可以了。

如果有人对这种高级CSS有更丰富的经验，可以为我提供一些有关如何构建此元素的建议，我将非常感谢。我的最后一招将是使用光栅化的图形，但结果会更糟。预先感谢！

到目前为止我已经尝试过：

更新：到目前为止，我的解决方案基于选定的答案： https://jsfiddle.net/fkquce21/3/

解决方法

也许有很多不同的方法可以解决此问题，但是严格遵循您共享的HTML结构，我将使用CSS来构建我的圈子而不是SVG并以此方式定位它们：

.ratings {
  display: flex;
  position: relative;
  justify-content: space-between;
  padding: 0;
}

.ratings:before {
  content: " ";
  width: calc(100% - 100px);
  height: 1px;
  background: black;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.ratings li {
  text-align: center;
  list-style: none;
  margin: 0 20px;
  position: relative;
}

.ratings li:before {
  content: " ";
  width: 20px;
  height: 20px;
  border: solid 2px black;
  border-radius: 50%;
  display: block;
  margin: 0 auto 5px;
  background: white;
}

.ratings li.active:after {
  content: " ";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  display: block;
  background: black;
}

这里是live demo供您参考。