change style when line breaks - html

Question

I have an HTML list with display: inline-block which I want to separate with a line to make a footer menu.
For that I apply a left border for every list item that has an item before. However, when screen is smaller and the line breaks, the first item in the second line shows the border.
How can I hide the border on the first item on the second line once the line breaks?
Here is a fiddle: https://jsfiddle.net/ur7dyL7u/3/
<style type="text/css">
li {
line-height: 24px;
display: inline-block;
border-right: none;
}
li~li {
border-left: red 2px solid;
padding-left: 5px;
}
div{
text-align:center;
}
</style>
<div>
<ul>
<li>Item nr 1</li>
<li>Item nr 2</li>
<li>Item nr 3</li>
<li>Item nr 4</li>
<li>Item nr 5</li>
<li>Item nr 6</li>
<li>Item nr 7</li>
<li>Item nr 8</li>
<li>Item nr 9</li>
<li>Item nr 10</li>
</ul>
<div>

Answer 1

I think there is no way to do that the way you want to, you will have to change the approach;
I tried those styles to achieve what you want:
ul{
padding:0; overflow:hidden;
}
li {
line-height: 24px;
display: inline-block;
border-right: none;
padding-left: 5px;
}
li~li {
box-shadow: -2px 0px 0px red;
}
Instead of a border, I use box shadow that is outside the box and set overflow hidden to the list so it will always hide the shadow of the first element on each line.
Here is a working example: https://jsfiddle.net/2o18jkfL/
Another one that "works" with text-align:center
http://codepen.io/sergio0983/pen/YpKxzQ
EDIT
Different approach using :before to cover the line on the first item in each line:
http://codepen.io/sergio0983/pen/eBOEpY

Answer 2

If you have no problem with having a separation in the first line when line-breaks you can do this:
Instead of using border-left use border-right in all your li elements except the last one.
ul {
text-align: center;
}
li {
line-height: 14px;
display: inline-block;
}
li:not(:last-child) {
border-right: red 1px solid;
padding-right: 10px;
}
<ul>
<li>Item nr 1</li>
<li>Item nr 2</li>
<li>Item nr 3</li>
<li>Item nr 4</li>
<li>Item nr 5</li>
<li>Item nr 6</li>
<li>Item nr 7</li>
<li>Item nr 8</li>
<li>Item nr 9</li>
<li>Item nr 10</li>
</ul>