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

Question

在我的应用程序中，我有 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 标签，但没有按预期工作。任何人都可以帮助我。

Answer 1

我已将 spans 添加到您的编号代码中。
如果你有更多的图标，为了让图标居中，你应该修改 left 属性 in .icons class.

.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>

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

How to add the thick grey line in between the font icons

html

css

fonts

icons