Html 防止：悬停样式影响：内容之后

由于无法编辑标记，我需要使用纯CSS在列表项之间进行分隔，因此我使用以下内容：

li:after { 
  content: '|';
}

这很好，效果很好，不是问题。但是，当我向每个列表项添加

：hover

效果时，它也会更改

：after

内容的样式。你可以在下面的演示中看到我的意思

有没有办法绕过这个问题

---

我建议，不要使用

：在
和
内容
之后，使用
右边框
。相同类型的输出由以下公式给出：

li{右边框：1px实心#999；线条高度：1；}

Fiddle:您可以将悬停效果添加到列表项内的链接中。因此，您可以使用
li:hover
作为选择器，而不是使用
li:hover a
。
仅使用：after作为简单的“|”是没有意义的。还有其他方法可以做到这一点。+1@Praveen，但它也在边界上产生悬停效果。不知道为什么我没有想到这么简单的东西，现在看起来很明显，谢谢@Vivek我们可以设置边界属性，伙计。这是可能的。我的车少了什么？没关系。我认为OP不希望在边界上出现悬停效果。：）@维韦克，这才是真正的问题！