CSS hide first li separator on each line - responsive horizontal css menu - css

Question

Is there a way to hide the separator in the first element on each line?
I have a responsive horizontal menu that adds extra lines when the window becomes smaller.
To make matters worse, the end user can add and remove items from this menu, or just change the order of the menu items.
Using first-child is not an option, because that only works for the first line. When the screen becomes too small the following lines will have the separator on their first li element.
#block-views-solutions-block{
box-sizing: border-box;
text-transform: uppercase;
font-weight: bold;
width: 92%;
max-width: $maxWidth;
margin: 20px auto 0 auto;
padding: 15px 0 0 0;
background-color: $colorBlue;
.content{
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
ul{
margin: 0 !important;
padding: 0 40px;
text-align: center;
}
li{
display: inline-block;
padding: 0 !important;
&:before {
position: relative;
top: 0.125em;
display: inline-block;
width: 1px;
height: 1em;
border-left: solid 2px #fff;
content: " ";
}
&:first-child{
&:before{ border-left: none; }
}
}
a{
display: inline-block;
padding: 0 10px;
color: #fff;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
h2{
color: #fff;
font-size: smaller;
padding-bottom: 5px;
}
}
Looks fine here:
Does not work for the 2nd or following lines:
Looks horrible on very small screens:
I've been trying out solutions on here and other websites, but none seem to do the trick.

Answer 1

I found a solution to this issue, with a couple of caveats:
The solution requires that the list be left- or right-aligned, and won't work with a centered list.
The solution requires that the ul element's overflow be hidden, which could pose a problem if you're also hoping to have dropdown menus.
The solution itself is very simple:
Use ::before or ::after to add the separator, depending on whether your nav is left- or right-aligned.
Position the separator relative to its initial position such that it sits outside its list item.
Use padding on the opposite side of the list item to create the space for its adjacent list item's separator.
Set overflow: hidden; on the ul element so that any separators which fall outside the container are hidden.
Here it is in action:
ul {
font-size: 0;
overflow: hidden;
padding: 0;
}
li {
font-size: 16px;
display: inline-block;
margin: 0;
padding: 0;
color: gray;
position: relative;
padding-right: 2rem;
}
li::before {
content: "|";
position: relative;
left: -1rem;
font-weight: bold;
color: black;
}
<ul>
<li>Item 1</li>
<li>Another Item</li>
<li>This Is Nice</li>
<li>Another</li>
<li>And Another</li>
<li>And Yet Another</li>
</ul>