CSS隐藏在每行第一李分离 - 响应水平CSS菜单

Question

有没有办法隐藏在每一行的第一个元素的分离？

我有一个响应水平的菜单，增加了额外的线路当窗口变小。

更糟糕的是，最终用户可以添加并从该菜单中删除的项目，或者只是改变菜单项的顺序。

使用第一胎是不是一种选择，因为这仅适用于第一线。当屏幕太小以下行会有他们的第一个li元素上的分隔符。

#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;
  }
}

看起来在这里很好：

为第二或以下行不起作用：

看起来可怕在非常小的屏幕：

我一直尝试在这里解决方案和其他网站，但没有人可以做的伎俩。

Answer 1

我找到了解决这个问题，有几个需要注意的地方：

• 该解决方案要求列表是左或右对齐，并且不会与一个中心列表工作。
• 该解决方案要求ul元素的溢出隐藏，这可能会带来一个问题，如果你还希望有下拉菜单。

该解决方案本身非常简单：

• 使用::before或::after添加分隔符，这取决于你的资产净值是左或右对齐。
• 相对于其初始位置的分离器，使得它位于它的列表项外侧位置。
• 使用该列表项的另一侧填充，以创造其相邻列表项的分隔符的空间。
• 设置overflow: hidden;的ul元件上，从而落入容器外部的任何分离器是隐藏的。

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>