Add Horizontal Lines Between Elements

Question

I\'m trying to add a horizontal line between two elements, like LinkedIn: I can\'t get the line on the left of the image to stop at the left side count. I\'ve been Googling for

Answer 1

Method 1: Flexbox

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

.divider {
  flex-grow: 1;
  border-bottom: 1px solid black;
  margin: 5px
}

<p class="divided">
  <span>Content 1</span>
  <span class="divider"></span>
  <span>Content 2</span>
</p>

Because the parent is flexbox, we can just tell the .divider element to fill all available space, by setting flex-grow: 1;.

---

Method 2: Solid background color

.divided {
  background: linear-gradient(transparent 45%, black 45%, black 55%, transparent 55%);
}

.divided span {
  background: white;
  padding: 0 5px;
}

.divided span:last-of-type {
  float: right;
}

<p class="divided">
  <span>Content 1</span>
  <span>Content 2</span>
</p>

We are giving .divided a linear-gradient as a background, to make a display that looks like a line of the color you want, then settings the <span>'s to have the same color background, so they cover the line.

You can accomplish the same thing quite a few different ways, such as using a pseudo element as the line, then giving the <span>'s a position and z-index.

What are the drawbacks of this method? It only works with a background that's a solid color. Throw an image, gradient, or anything that the content's background is gonna cover, and you'll end up with a display like so:

Answer 2

Here is another one:

.box { 
  width: 100%;  
  display:-moz-flex;
  display:-webkit-flex;
  display:-ms-flex;
  display:flex;
}

hr {
  /*border: .5px solid #000;*/
  margin-left: 10px;
  margin-right: 10px;
}

.hr-line {
  -moz-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
 }

<div class="box">
    <label>count</label>
    <div class="hr-line"><hr></div>
    <img src="http://i.stack.imgur.com/qh235.png">
</div>