Add Horizontal Lines Between Elements

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.