css - 将鼠标悬停在不包含内容后的导航上

Question

所以我现在有一个像这样的管道分隔器的下拉菜单 => 主页 |关于 |表3

CSS 看起来像这样:

.navigation li a:after {
 content: " | "; }

我使用鼠标悬停在下拉菜单上，但问题是它包含 |当它改变颜色时，管道与顶层下拉菜单一起使用。下拉菜单是标准下拉菜单 CSS:

    .multi-column-dropdown li a {
         display: block;
         clear: both;
         color: #eee;
         white-space: normal;
         font-size: 16px;
       }

如何才能使鼠标悬停在选择上仅包含实际文本，而不会在管道上产生鼠标悬停效果？它本质上是将“Home”视为“Home |”当悬停时背景颜色发生变化时，我绝对不希望这样。

我还为某些下拉元素使用了 Bootstrap 3。

编辑:澄清一下，我知道事实上的标准是将它添加到标记外的 HTML 中。 bootstrap 的工作方式，因为它在技术上是一个折叠的垂直菜单，它插入 |管道在导航菜单上方或下方，而不是保持内联

Answer 1

难道你不能摆脱你的 |在你的 css 中并将它留在你的 html 代码中？

<a href="#">Link 1</a>|
<a href="#">Link 2</a>|
<a href="#">Link 3</a>|