Question

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

在这个URL下面的菜单文本小副标题为＆＃34; Aktuella kampanjer＆＃34;添加了等等不同的字幕。

我尝试使用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

In order to get the content:'text here' CSS to work it needs to be included on a pseudo element; either a:before { } or a:after { }.

This will create a new pseudo-element inside your <a href="http://www.hummingbird.se/erbjudanden/">Erbjudanden</a> link, and you can then give that element styling and text content. e.g.

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

The :before or :after elements technically exist within the link though, so if you click on them you're essentially clicking on the link too, which may not be the behaviour you're looking for.

If your issue is getting the different subtitles onto each item you can use data attributes on the link to pass different values to your content property. e.g.

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

You could then place the different subtitles straight in your single link of link markup, but control where and how they appear independantly.

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

1 个答案: