Add horizontal lines between items

Question

I am trying to add a horizontal line between two elements, for example LinkedIn: I can’t get the line to the left of the image to stop it on the left side. I have been working at Google for a long time and cannot find this particular case. I am sure there, but I have not found this. Here is how far I got:

HTML:

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

And 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 could be an option (div between elements with a div having a border):

HTML:

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

And 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 that doesn't work either. If anyone could touch any attempt, it would be great.

Answer 1

If you can use flex-box, it is very simple.

 p.divider { display: flex; flex-direction: row; align-items: center; } p.divider * { flex-shrink: 0 } p.divider span.divider { width: 100%; flex-shrink: 1; border-bottom: 1px solid black; margin: 5px } 

 <p class="divider"> <span>Part1</span> <span class="divider"></span> <span>part2</span> </p> 

Here's the logic:

span.divider set to fill 100% of the width, but since this is a flexible box layout, the line cannot overflow (unless specified). When we tell the layout that none of the elements can be compressed:

 p.divider * { flex-shrink: 0 } 

Then set span.divider as the only element that can be compressed, it will be compressed to fit all the other elements on the line.

---

If you cannot use flex, you can still achieve the effect.

 p.divider { background: linear-gradient(transparent 45%, black 45%, black 55%, transparent 55%); overflow: hidden; } p.divider > * { background: white; padding: 0 5px; } p.divider > .right { float: right; } 

 <p class="divider"> <span>Hola!!</span> <span class="right">Hola2!!</span> </p> 

Explanation:

You set the p.divider background p.divider linear gradient of the desired color, and then set its children to a solid color to hide it where the content is. (You can also use an image for the background)

What are the disadvantages of this? If you have a background image, it looks bad:

Unlike a flexible layout:

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>