Question

所以我目前有一个管道分隔器的下拉列表，如so =＆gt;主页|关于| TAB3

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中。引导程序的工作方式，因为它在技术上是一个折叠的垂直菜单，它推动了|管道在导航菜单的上方或下方，而不是保持内联

Answer 1

你不能摆脱你的|在您的CSS中并将其保留在您的HTML代码中？

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

Answer 2

如果我理解这一点，你说的是'|'是你的悬停风格？

你可以这样定位;

.multi-column-dropdown li a:hover:before {
    //Put your css here
    color: black;

}

Answer 3

你的问题是关于继承，因为：after class pseudo 是其父级的内容。你可以设置：after 的样式以确保你想要的样式。 There is a link.

将鼠标悬停在导航上而不包括After Content

3 个答案: