Draw a line in CSS between FA icons

Question

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.

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;

Possible duplicate of [How to draw a horizontal line between two circles with css?](https://stackoverflow.com/questions/40077096/how-to-draw-a-horizontal-line-between-two-circles-with-css) — Rob, Dec 19 '17 at 20:26

score 1 · Accepted Answer · answered Dec 19 '17 at 19:50

You can add a line using the ::before pseudo-element under the circles, and use the circles background, and box-shadow to hide parts of the line.

.content-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F9F9F9;
  padding: 1em;
  overflow: hidden;
}

.content-wrap::before {
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  left: 0;
  Content: "";
  Background-color: grey;
  height: 2px;
}

.icon1 {
  position: relative;
  z-index: 1;
  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;
  background: #F9F9F9;
  box-shadow: 0 0 0 0.5em #F9F9F9;
}

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

Sorry for the late answer, thank you so much for the clean solution, its very simple to do. I ran into an issue, though, hence the reason I'm replying at all. Since my content-wrap is within another container, when I wrote the code I got a line that span through the entire parent element and I got the line showing on the left side of the first circle and on the right side of the last one. The way I fixed it was to use 20% on right and left instead of 0 on the content-wrap div. — wdGelwix, Dec 21 '17 at 08:55
You should just add `position: relative;` to the line's container. You can see it in the `.content-wrap` css in the example. — Ori Drori, Dec 21 '17 at 08:57

curveball · Answer 2 · 2017-12-19T20:37:25.830

I think I could make it work. Check it out. It is even responsive and the circles don't overlap on small viewports. The code is pretty self-descriptive. However, there are 3 key points I would like to highlight:

Usage of calc() that allows us to calculate values (width) and, thus, make lines responsive;
Positioning that allows us to place lines outside the circles;
Property justify-content: space-between; that creates space among circles;

.content-wrap {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.icon1 {
    width: 6rem;
    height: 6rem;
    font-size: 4rem!important; /* !important is here just to override SO styles*/
    color: #777;
    border: 2px solid #777777;
    border-radius: 50%;
    padding: 1rem;
    text-align: center;
    line-height: 6rem!important; /* !important is here just to override SO styles*/
}
.icon1:not(:last-of-type)::after {
    content: "";
    background-color: grey;
    height: 2px;
    width: calc(100%/2 - 14rem); /* 6rem width of left circle + (1 + 1)rem its paddings + (1 + 1)rem positioning + 3rem half-width of central circle + 1rem its padding*/
    position: absolute;
    top: 50%;
    margin-top: -1px;
}

.icon1:nth-child(1)::after {
    left: 9rem;
}

.icon1:nth-child(2)::after {
    right: 9rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<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>

Draw a line in CSS between FA icons

2 Answers2