2

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>

4

3 回答 3

3

问题在于以下 CSS 规则：

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

这隐藏了所有:before元素，因为.circle它始终是div.flex. 您需要找到第一个元素并将该元素.flex隐藏在此元素中。:before.circle

我假设您尝试使用带有垂直线的圆圈创建一个链。因此，您可以尝试以下解决方案。

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

于 2018-06-20T22:05:22.503 回答
0

不知道你的意思是水平的还是垂直的。

对于您之间的水平线，您可以flex-wrap: wrap;通过这种方式添加和使用伪元素：

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

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

看看这个小提琴看看它在行动：https ://jsfiddle.net/15dpa2ux/

对于垂直线，删除您的.circle:first-child和.circle:before样式.circle:first-child:before，然后您必须以这种方式设置元素的样式：

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

看看这个小提琴看看它在行动：https ://jsfiddle.net/p3gt02yb/23/

于 2018-06-20T22:04:54.863 回答
0

这使您看不到线条：

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

每个圈子都是“.flex”父母的第一个孩子。

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

于 2018-06-20T22:16:34.270 回答