Question

我尝试使用伪元素来创建“ 2”的两条边线（每边各一条），但是它不起作用。我读这是因为flexbox不会呈现空元素。我该如何完成我的追求？

CSS

.stepTag{
    font-weight: 500;
    font-size: 1.1em;
    border-radius: 50%;
    width: 4%;
    height:4%;
    padding: 0.5em;
    background: #E4002B;
    color: #FFFFFF;
}

HTML：

<div style={{display: "flex", alignItems:"center", justifyContent:"space-around"}}>
  <p className={`${s.stepTag}`}>1</p>}
    {<p className={`${s.stepTag}`}>2</p>}
  <p className={`${s.stepTag}`}>3</p>
</div>

Answer 1

我花了太长时间，但是刚刚提出来，希望对您有帮助...

HTML

.title::before {
  display: inline-flex;
  content: '';
  border-top: 2px solid #9d9d9d;
  width: 150px;
  height: 12px;
  margin-right: 30px;
}

.title::after {
  display: inline-flex;
  content: '';
  border-top: 2px solid #9d9d9d;
  width: 150px;
  height: 12px;
  margin-left: 30px;
}

<h1 class="title">Your text here</h1>

Answer 2

您可以尝试这样的事情，

div{
display: flex;
align-items: center;
justify-content: space-around;
}
.horiz{
  position: relative;
}
.horiz::before{
  content: '';
  position: absolute;
  width:100px;
  border: 1px solid black;
  top:10px;
  right: 100%;
  
  
}
.horiz::after{
  content: '';
  position: absolute;
  width: 100px;
  border: 1px solid black;
  top:10px;
  left: 100%;
}

<div>
  <p class="pipe">1</p>
   <p class="pipe horiz">2</p>
  <p class="pipe">3</p>
</div>

Answer 3

div{
display: flex;
align-items: center;
justify-content: space-around;
}
.horiz{
  position: relative;
}
.horiz::before, .horiz::after{
  content: '';
  position: absolute;
  width:100px;
  border: 1px solid black;
  top:10px;
  right: 100%;  
}
.horiz::after{
  left: 100%;
}

<div>
  <p class="pipe">1</p>
   <p class="pipe horiz">2</p>
  <p class="pipe">3</p>
</div>

Flexbox侧面水平线

3 个答案: