How to add a line as a pseudo element when using flex-box

Question

I would like to add a vertical line between each circle, however when using a :before pseudo element this doesn't show the border. When I remove the flex box parent then the lines appear.

How can I achieve this without having to remove the flexbox, as I need to have the text in line with the numbered circles.

https://jsfiddle.net/p3gt02yb/1/

.circle {
  position: relative;
  border: 2px solid #999;
  border-radius: 100%;
  width: 50px;
  line-height: 50px;
  text-align: center;
  margin-top: 50px;
  background-color: #fff;
  z-index: 2;
}

.circle:first-child {
  margin-top: 0;
}

.circle:before {
  position: absolute;
  border: 1px solid #999;
  width: 0;
  height: 50px;
  display: block;
  content: '';
  left: 50%;
  z-index: 1;
  top: -54px;
  margin-left: -1px;
}

.circle:first-child:before {
  display: none;
}

.flex {
  display: flex;
  align-items: center;
}

.text-padding {
  padding: 0 15px;
}

<section>
  <div class="flex">
    <div class="circle">1</div>
    <strong class="text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class="flex">
    <div class="circle">2</div>
    <strong class="text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class="flex">
    <div class="circle">3</div>
    <strong class="text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class="flex">
    <div class="circle">4</div>
    <strong class="text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class="flex">
    <div class="circle">5</div>
    <strong class="text-padding">Lorem Ipsum Dollar</strong>
  </div>
</section>

Answer 1

The problem is the following CSS rule:

.circle:first-child:before {
    display: none;
}

This hides all your :before elements because .circle is always the first child of div.flex. You need to find the first .flex element and hide the :before element on the .circle in this element.

I assume you try to create a chain with the circles with the vertical line. So you can try the following solution.

.circle {
  background: #fff;
  border: 2px solid #999;
  border-radius: 100%;
  line-height: 50px;
  margin-top: 50px;
  position: relative;
  text-align: center;
  width: 50px;
}
.circle:first-child {
  margin-top: 0;
}
.circle::before {
  border: 1px solid #999;
  content: '';
  display: block;
  height: 20px;
  left: 50%;
  position: absolute;
  top:-22px; /** (margin between circle (20px * -1)) - (border-width (2px * -1)) = -22px */  
}
.flex {
  align-items: center;
  display: flex;
  margin-bottom: 20px; /** vertical-space between the circles. */
}
.text-padding {
  padding: 0 15px;
}
.flex:first-child .circle::before {
  display:none;
}

<section>
  <div class="flex">
    <div class="circle">1</div>
    <strong class="text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class="flex">
    <div class="circle">2</div>
    <strong class="text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class="flex">
    <div class="circle">3</div>
    <strong class="text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class="flex">
    <div class="circle">4</div>
    <strong class="text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class="flex">
    <div class="circle">5</div>
    <strong class="text-padding">Lorem Ipsum Dollar</strong>
  </div>
</section>

Answer 2

Not sure if you mean horizontal or vertical.

For a horizontal line between you could add flex-wrap: wrap; and use a pseudo element this way:

.flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.flex::after {
    content: '';
    display: block;
    width: 100%;
    border-bottom: 1px solid black;
    margin: 4px 0;
}

Take a look at this fiddle to see it in action: https://jsfiddle.net/15dpa2ux/

For a vertical line, remove your .circle:first-child, .circle:before and .circle:first-child:before stylings, then you have to style your elements this way:

.circle:after {
  content: '';
  border: 1px solid #999;
  position: absolute;
  right: -15px;
  top: 0;
  bottom: 0;
}

Take a look at this fiddle to see it in action: https://jsfiddle.net/p3gt02yb/23/

Answer 3

This makes you can't see the lines:

.circle:first-child:before {
 display: none;
}

Every circle is a first child of '.flex' parent.

.circle {
  position: relative;
  border: 2px solid #999;
  border-radius: 100%;
  width: 50px;
  line-height: 50px;
  text-align: center;
  margin-top: 50px;
  background-color: #fff;
  z-index: 2;
}

.circle:first-child {
  margin-top: 0;
}

.circle:before {
  position: absolute;
  border: 1px solid #999;
  width: 0;
  height: 50px;
  display: block;
  content: '';
  left: 50%;
  z-index: 1;
  top: -54px;
  margin-left: -1px;
}



.flex {
  display: flex;
  align-items: center;
}

.text-padding {
  padding: 0 15px;
}

<section>
  <div class="flex">
    <div class="circle">1</div>
    <strong class="text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class="flex">
    <div class="circle">2</div>
    <strong class="text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class="flex">
    <div class="circle">3</div>
    <strong class="text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class="flex">
    <div class="circle">4</div>
    <strong class="text-padding">Lorem Ipsum Dollar</strong>
  </div>
  <div class="flex">
    <div class="circle">5</div>
    <strong class="text-padding">Lorem Ipsum Dollar</strong>
  </div>
</section>