javascript - 在每个内联 li 之间放置一个定界符，但不在边缘

Question

是否可以在每个内联 <li> 之间放置一个分隔符但是它只出现在行中的每个元素之间，而不出现在行的开头或结尾？如果它不能用 CSS 完成，那么也许它可以用 JavaScript/jQuery 解决吗？

http://codepen.io/anon/pen/Pbxddo

<ul>
  <li>Something</li>
  <li>Something</li>
  <li>Something</li>
  <li>Something</li>
</ul>

ul {
  list-style-type: none;
  padding: 10px;
  li {
    display: inline;
    &:after {
    padding-left: 5px;
      content: '|';
    }
  }
}

编辑:我认为没有人理解......我想要的是删除每行开头或结尾的每个定界符，我不知道如何写的更清楚。

在此图像中，应删除此分隔符

这样结果会是这样的

Answer 1

使用 li:last-child 选择器，例如:

li:last-child:after {
  content: '';
}

看看下面的代码片段，或 Codepen (使用 SCSS)。

div {
  border: 3px solid #333;
  width: 300px;
  margin: auto;
}

ul {
  list-style-type: none;
  padding: 10px;
}
ul li {
  display: inline;
  font-size: 20px;
}
ul li:after {
  padding-left: 5px;
  content: '|';
}
ul li:last-child:after {
  content: '';
}

<div>
<ul>
  <li>Something</li>
  <li>Something else</li>
  <li>Bananas, apples </li>
  <li>Tea and cookies</li>
  <li>Football or soccer</li>
  <li>sky, earth, trees, nature</li>
  <li>Furniture, painting, closet, bed, carpet</li>
  <li>window, clothes, light, door</li>
  <li>Something else in the room</li>
  </ul>
</div>

希望这对您有所帮助!