CODEWITHSUNDEEP
cssflexbox
Edgardo Minotauro
Edgardo Minotauro

Reputation: 77

Side horizontal lines with flexbox

I tried using a pseudo elements to create two side lines (one from each side) of the "2" but it's not working. I read it's because flexbox doesn't render empty elements. How can I accomplish what I'm after?

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>

Upvotes: 0

Views: 977

Answers (3)

Robert Stoelhorst
Robert Stoelhorst

Reputation: 19

I have spent too long on this but just came up with this, I hope it helps...

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>

Upvotes: 2

Jone
Jone

Reputation: 170

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>

Upvotes: 0

Aditya Thakur
Aditya Thakur

Reputation: 2610

You can try something like this,

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>

Upvotes: 0

Related Questions