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

In my application I have the 10 icons which are added as side by side within a row and my requirement is to add the thick greyline in between the icons as given below.

and the code is..

<div>
<i ></i>
<i ></i>
<i ></i>
</div>

Like the above I have 10 icons .Now I have to add the thick grey line in between the icons and below the icon it has to show the number as in image.

I tried with hr tag but not working as expected. Can anyone help me on the same.

CodePudding user response：

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

<html>

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

<body>
  <div >
    <i >cloud</i>
    <i >cloud</i>
    <i >cloud</i>
    <i >cloud</i>
    <i >cloud</i>
    <i >cloud</i>
    <i >cloud</i>
    <i >cloud</i>
    <i >cloud</i> 
    <i >cloud</i>
  </div>
</body>

</html>