使用 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);
}

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