如何在字体图标之间添加粗灰线答案

【问题标题】：How to add the thick grey line in between the font icons如何在字体图标之间添加粗灰线
【发布时间】：2022-02-02 16:19:48
【问题描述】：

在我的应用程序中，我有 10 个图标，它们在一行中并排添加，我的要求是在图标之间添加粗灰线，如下所示。

代码是..

<div>
<i class="stl icon icon-smiley-face-1"></i>
<i class="stl icon icon-smiley-face-2"></i>
<i class="stl icon icon-smiley-face-3"></i>
</div>

像上面一样，我有 10 个图标。现在我必须在图标之间添加粗灰色线，在图标下方它必须显示图像中的数字。

我尝试使用 hr 标签，但没有按预期工作。任何人都可以帮助我吗？

【问题讨论】：

“在图标下方必须显示数字” - 看起来这些数字是这里的实际相关信息，其余的只是“装饰”。因此，这应该开始以表示这些数字的适当 HTML 结构 - 就像一个列表，其中包含这些数字的 lis 项目。（如果这最终应该成为一个“排名”组件，那么这些数字可能应该是分配给相应单选按钮的标签。）
你试过在你的CSS中使用.icon::before和.icon::after吗？使用这种方法，您可以自动插入灰线，在每个笑脸之前插入一条，在每个笑脸之后插入一条。没有填充或边距，我希望每条“after 灰线”都将连接到以下“before 灰线”。这是来自 CSS Tricks 的更多信息。 css-tricks.com/almanac/selectors/a/after-and-before

标签： html css fonts icons

【解决方案1】：

我在您的代码中添加了spans 以进行编号。
如果你有更多的图标，为了使数字与图标居中，你应该修改.icons类中的left属性。

.box{
  width:50%;
  margin: 200px auto;
  padding: 20px;
  background: gold;
  display: flex;
  justify-content:space-evenly;
  position: relative;
  z-index: -2;
  counter-reset: number;
}
.material-icons{
  color: #fff;
}
.material-icons:first-of-type:after,
.material-icons:last-of-type:after{
  content: "";
  display: inline-block;
  width:50%;
  border-top: 4px solid gray;
  position: absolute;
  top: 50%;
  z-index: -1;
}
.material-icons:last-of-type:after{
  transform:translate(-100%);
}
.icons{
  position: relative;
  left: 8%;
  top: 20px;
}
.icons:after{
  content: counter(number);
  counter-increment: number;
}

<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
  <div class="box">
    <span class="icons"></span><i class="material-icons">cloud</i>
    <span class="icons"></span><i class="material-icons">cloud</i>
    <span class="icons"></span><i class="material-icons">cloud</i>
    <span class="icons"></span><i class="material-icons">cloud</i>
    <span class="icons"></span><i class="material-icons">cloud</i>
    <span class="icons"></span><i class="material-icons">cloud</i>
  </div>
</body>

</html>

【讨论】：

感谢@M.R MRF，它工作正常，请您帮我如何在上图中的图标下方添加数字