我想使用jQuery在“.demo：before”上设置CSS counter-increment属性.
问题是jQuery无法访问伪元素.另一个S.O.回答(我现在似乎无法找到)建议设置数据属性,然后在CSS中使用该值,但这也不起作用.这是可以实现的吗？
简化示例：http://jsfiddle.net/4h7hk8td/
HTML：
<ul class="demo">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
JS：
// 1) User Sets Unit Size
var myUnit = 100;
// 2) Unit size is saved via data attribute
$('.demo li').attr('data-unit',myUnit);
CSS：
.demo {
counter-reset: list;
}
.demo li:before {
/* 3) CSS gets data attribute and applies as the increment. Not working :( */
counter-increment: list attr(data-unit);
content: counter(list);
}
解决方法
增加每个li的计数器而不是：之前：
http://jsfiddle.net/7vt0kf2c/.
var myUnit = 100;
$(".demo li").css("counter-increment","list " + myUnit);
$("button").click(function(e) {
$(".demo li").css("counter-increment","list " + 200);
});