使用css或jquery为所有菜单在菜单下添加文本

Question

我想在菜单中添加字幕。已经添加了副标题，但我不知道它是如何添加的。我想在下一行中再次添加相同的文本。检查网址：http://www.hummingbird.se/

在下面的URL菜单文本中添加了小副标题"Aktuella kampanjer“，并添加了不同的副标题。

我尝试使用css，但是向下箭头被隐藏了。有没有其他方法可以使用jquery或CSS，因为每次我都必须在每个菜单下面添加不同的副标题。这里没有办法在html结构中添加新的类。我有以下代码结构：

<a href="http://www.hummingbird.se/erbjudanden/">
Erbjudanden
</a>

我希望结构是这样的：

<a href="http://www.hummingbird.se/erbjudanden/">
Erbjudanden
<span class="sub hidden-xs">Aktuella kampanjer</span>
<span class="toggle-submenu"></span>
</a>

我尝试了下面的css：

.sub hidden-xs{
content : 'Aktuella kampanjer';
}

Answer 1

为了让content:'text here' CSS正常工作，需要将其包含在一个伪元素中；a:before { }或a:after { }。

这将在您的<a href="http://www.hummingbird.se/erbjudanden/">Erbjudanden</a>链接中创建一个新的伪元素，然后您可以为该元素指定样式和文本内容。例如：

a:before {
    content: 'Aktuella kampanjer';
}

但从技术上讲，:before或:after元素存在于链接中，所以如果您单击它们，实际上也是在单击该链接，这可能不是您正在寻找的行为。

如果您的问题是将不同的字幕添加到每个项目上，则可以使用链接上的数据属性将不同的值传递给您的内容属性。例如：

<a href="http://www.hummingbird.se/erbjudanden/"
   data-subtitle="Aktuella kampanjer"
>Erbjudanden</a>
<a href="http://www.hummingbird.se/different_link/"
   data-subtitle="Different subtitle"
>Erbjudanden</a>

a:before {
    content: attr(data-subtitle);
}

然后你可以将不同的字幕直接放在链接标记的单个链接中，但可以控制它们独立出现的位置和方式。