使用 flex-box 时如何添加一行作为伪元素

Question

我想在每个圆圈之间添加一条垂直线，但是当使用 :before 伪元素时，它不会显示边框。当我移除 flex box parent 时，线条就会出现。

如何在不移除 flexbox 的情况下实现这一点，因为我需要让文本与编号的圆圈对齐。

.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

不确定你是指水平还是垂直。

对于水平线，您可以添加 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;
}

看看这个 fiddle 以了解它的实际效果：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;
}

看看这个 fiddle 以了解它的实际效果：https://jsfiddle.net/p3gt02yb/23/

Answer 2

问题是以下 CSS 规则：

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

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

我假设您尝试创建一个带有垂直线的圆圈的链。所以你可以试试下面的解决方法。

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

这让你看不到线条：

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

使用 flex-box 时如何添加一行作为伪元素

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

html

css

pseudo-element

flexbox