How can I achieve this effect?
I used FA (Font Awesome) icons and added the border myself, when I use the ::after and add a line, for example, like:

```
Content: "";
Background-color: grey;
height: 2px;
width: 300px;

```

it starts right after the icon itself ( not after the border ). I'm new to CSS, is this the way to go about it? I tried searching for that, but couldn't formulate my question, so I couldn't find an answer. Sorry if this is repetitive, thanks a lot.

[![Example](https://i.stack.imgur.com/x11VN.png)](https://i.stack.imgur.com/x11VN.png)

HTML code used 

```
  <div class="content-wrap">
    <i class="fa fa-music icon1"></i>
    <i class="fa fa-signal icon1"></i>
    <i class="fa fa-star-o icon1"></i>
    </div>

```

CSS code used

```
.icon1 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6rem;
    height: 6rem;
    font-size: 3rem;
    color: #777;
    border: 2px solid #777777;
    border-radius: 50%;
    padding: 1rem;

```

They are spaced out in a container with a width of 1140px. 
the content-wrap div has display: flex, and justify-content: space-between;