CODEWITHSUNDEEP
htmlcsssass
dustin
dustin

Reputation: 135

How to get even lines and spacing betweeen text using css

Looking for a way to create lines between a group of words. I'm able to get it to kinda work, but I won't always know the length of the words and I'm unable to keep an even amount of space between the text and lines.

I think I might be able to add some empty divs to get this to work, but I was trying to avoid useless markup being added to the DOM

.progress-bar {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: 50px;
  }

  .progress-bar p {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    line-height: 0.1em;
    
  }

  .progress-bar p::after {
    content: "";
    z-index: -1;
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    width: 25%;
    height: 2px;
    background: black;
  }

  .progress-bar p:last-of-type::after {
    background: none;
    content: "";
  }
<div class="progress-bar">
  <p>text one</p>
  <p> text two</p>
  <p>text three</p>
  <p>text four</p>
</div>

Upvotes: 0

Views: 1056

Answers (3)

Temani Afif
Temani Afif

Reputation: 273011

The easiest solution is to use display:contents with your text and the line will also be part of the flexbox container

.progress-bar {
  display: flex;
  justify-content: space-around;
  align-items:center;
  margin-top: 50px;
}

.progress-bar p {
  display: contents;
  text-align: center;
  line-height: 0.1em;
}

.progress-bar p:not(:last-of-type)::after {
  content: "";
  width: 8%;
  height: 2px;
  background: black;
}
<div class="progress-bar">
  <p>text one</p>
  <p> text two</p>
  <p>text three</p>
  <p>text four</p>
</div>

Also like below:

.progress-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.progress-bar p {
  display: contents;
  text-align:center;
  line-height: 0.1em;
}

.progress-bar p:not(:last-of-type)::after {
  content: "";
  width: 8%;
  margin:0 3%;
  height: 2px;
  background: black;
}
<div class="progress-bar">
  <p>text one</p>
  <p> text two</p>
  <p>text three</p>
  <p>text four</p>
</div>

Upvotes: 1

A Haworth
A Haworth

Reputation: 36512

I didn't find a suitable way using flex and space-between as somehow we 'lose' the info. on the width and position of each text.

So here's a method using the inline-blocks, padding and margins.

The hack here is to draw the inter-text lines as one continuous line and then get each text to blank out some of it to left and right (using padding and background color). The texts are evenly spaced however wide they are.

This snippet lets you set 3 variables to accommodate whatever you want the line width to be, the gap between a text and the line and the number of items in the progress bar. You can play with those to get the spacing you want.

The result is responsive in that a longer text will break over several lines if needed but the inter text line stays at the middle of the texts.

.progress-bar {
  width: 100%;
  position: relative;
  margin-top: 50px;
  background-image: linear-gradient(black, black);
  background-size: 100% 2px;
  background-position: 0 calc(50% - 1px);
  background-repeat: no-repeat no-repeat;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* alter these to suit your use-case */
  --lineW: 6%;
  /* width of the lines between texts */
  --gapW: 3%;
  /* width of the gap between text and line */
  --n: 4;
  /* number of items in the progress bar */
}

p {
  display: inline-block;
  position: relative;
  background: white;
  text-align: center;
  padding: 0 var(--gapW);
  margin: 0 calc(var(--lineW) / 2);
  max-width: calc((100% - (var(--n) * (var(--gapW) + var(--lineW)))) / var(--n));
}

p:first-child::before,
p:last-child::after {
  content: '';
  display: inline-block;
  margin-right: 0;
  position: absolute;
  width: 100vw;
  background: white;
  z-index: 1;
  height: 100%;
}

p:first-child::before {
  right: 100%;
}

p:last-child::after {
  left: 100%;
}
<div class="progress-bar">
  <p>text one</p>
  <p>text two</p>
  <p>text three is noticeably wider</p>
  <p>text four</p>
</div>

Upvotes: 1

Gabriel Donada
Gabriel Donada

Reputation: 449

You may use gap sintaxe to make these spaces:

In your css, you may do it:

.progress-bar{
  display: flex;
  flex-orientation: column;
  gap: 2rem;
}

Here you can learn about flex: https://www.w3schools.com/css/css3_flexbox.asp

Upvotes: -1

Related Questions