Pure CSS for the border between two text areas -


i got design between 2 menu options there 2px border. please see image:

enter image description here

the tricky thing border shorter height of menu texts. the menu texts have in 2 lines, exact way shown. have more items different width of text. have pure css solution it, cannot figure out right way. tried different ways , got closest:

    <div style="height: 15px; display:inline-block; border-left: 2px solid red; padding:0 15px;">first<br/>item</div>     <div style="height: 15px; display:inline-block; border-left: 2px solid red; padding:0 15px;">second<br/>item</div> 

see picture above work:

enter image description here

the problem border not in middle vertically. how can make border stay in middle vertically?

or other css way achieve shown in design?

example :before pseudo element: https://jsfiddle.net/qfadxsyd/7/

.box:before {   position:absolute;   content:'';   height:80%;   right:-1px;   width:2px;   top:0;   bottom:0;   margin:auto;   background:red;  } 

and funny games in order hide last border. luck!

note: have removed whitespace between divs remove ghost margins between inline-block; elements:

<div class="box box">box<br/>item</div><div class="box box">box<br/>item</div><div class="box box">box<br/>item</div><div class="box box">box<br/>item</div><div class="box box">box<br/>item</div><div class="box box">box<br/>item</div><div class="box box">box<br/>item</div><div class="box box">box<br/>item</div> 

Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -