Behnoosh Mzd Behnoosh Mzd - 5 months ago 10
HTML Question

vertical break line an inline list

How to put the text in the middle of vertical span?

enter image description here

I want it to look like:

enter image description here

html code:

<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-lg-12 hidden-xs text-center">
<ul class="list-group2 list-inline">
<li class="list-group-item2">
<a href="#">آرایشی</a>
</li>
<li class="list-group-item2 sep"></li>
<li class="list-group-item2">
<a href="#">رایحه</a>
</li>
<li class="list-group-item2 sep"></li>
<li class="list-group-item2">
<a href="#">شست و شو</a>
</li>
<li class="list-group-item2 sep"></li>
<li class="list-group-item2">
<a href="#">مو</a>
</li>
<li class="list-group-item2 sep"></li>
<li class="list-group-item2">
<a href="#">پوست</a>
</li>
<li class="list-group-item2 sep"></li>
<li class="list-group-item2">
<a href="#">آقایان</a>
</li>
<li class="list-group-item2 sep"></li>
<li class="list-group-item2">
<a href="#">خانم ها</a>
</li>
</ul>
</div>
</div>
</div>


css:

.list-group-item2{
border: none;
list-style: none;
font-family: 'Adobe Arabic';
font-size: 167%;
}
li a{
color: #000000;
background: transparent;
}
li a:hover{
text-decoration: none;
color: #fd5900;
}
.list-group-item2.sep{
width: 1px;
background: url('download.png')left center no-repeat;
}

Answer

Based on the examples you've shown, it sounds like you want to have a navigation-style list with a vertical line breaking up each item, something like:

item 1 | item 2 | item 3 | item 4

You can achieve this with a combination of borders and :last-of-type to remove the final border at the end of your list. See the following CodePen for example code:

http://codepen.io/rkieru/pen/JKyYpx