阻止：影响的悬停样式：在内容之后

Question

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

li:after { 
  content: '|';
}

这很好，运作良好，support不是问题。但是，当我为每个列表项添加:hover效果时，它还会更改:after内容的样式。您可以在下面的演示中看到我的意思。

有没有办法解决这个问题？

Simple version here

Answer 1

我建议，不要使用:after和content，而是使用border-right。相同类型的输出由下式给出：

li {border-right: 1px solid #999; line-height: 1;}

小提琴：http://jsfiddle.net/praveenscience/2bRy6/3/

Answer 2

您可以将悬停效果添加到list-item内的链接。因此，您可以使用li:hover作为选择器，而不是使用li:hover a。