我怎么能拿伪:在{content:"Value"之后; 在此代码段中动态值？

Question

我这里有一个小css片段:http://jsfiddle.net/cr6Hm/(类似的例子可以在http://9gag.com/上找到)

基本上,它在Notifications链接上显示一个小div,上面New写有文字.

现在,New文本是使用div编写的pseudo:after,它可以工作.

// This one works
.text-new:after {
    content: 'New';
}

但是,我想New动态更改文本.(例如,我想显示通知量而不是新的)

我不知道我怎么能这样做,因为我不知道它是如何pseudo:after工作的.

基本上,它应该是这样的:

<span class="popup popup-greenish">
    <i class="text>{{ $amount_notifications }}</i>
    Notifications
</span>

有人可以帮忙吗？

Answer 1

这需要一个如下属性:

<span class="test" data-count="123">...</span>

和CSS:

.test:after {
    content: attr(data-count);
}

请注意,该属性必须位于伪元素所属的元素上.