html - 防止 :hover 样式影响 :after 内容

Question

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

li:after { 
  content: '|';
}

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

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

简单版在这里

Answer 1

我会建议，而不是使用:afterand content，使用border-right. 相同类型的输出由下式给出：

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

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

Answer 2

您可以将悬停效果添加到列表项内的链接。因此，与其使用li:hover您，不如将li:hover a其用作选择器。