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 a long time and can't find this particular case. I'm sure it's out there, but I haven't found it. This is how far I've gotten:

The HTML:

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

And the CSS:

div.img {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: right;
}
div.img:before {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 100%;
    margin-left: -100%;
    text-align: right;
    height: 1px;
    content: '\a0';
    background-color: blue;
}

http://jsfiddle.net/XWVxk/1465/

I also thought that this structure might be an option (div in between elements with the div having a border):

The HTML:

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

And the CSS:

div.hr-line {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    width: 100%;
    border-bottom: 1px solid #7A7A7A;
}

http://jsfiddle.net/XWVxk/1464/

But it doesn't work exactly either. If anyone could touch up either attempt, it would be great.

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: