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

Question

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

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

现在，New文字是使用pseudo:after在div上编写的，并且有效。

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

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