I want to set the CSS counter-increment attribute on ".demo:before" using jQuery.

The problem is jQuery cannot access a pseudo element. Another S.O. answer (which I can't seem to find now) suggested setting a data-attribute, and then using that value within the CSS, but that isn't working either. Is this something that can be acplished?

Simplified Example: /

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

I want to set the CSS counter-increment attribute on ".demo:before" using jQuery.

The problem is jQuery cannot access a pseudo element. Another S.O. answer (which I can't seem to find now) suggested setting a data-attribute, and then using that value within the CSS, but that isn't working either. Is this something that can be acplished?

Simplified Example: http://jsfiddle/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);
}

• javascript
• jquery
• css
• counter
• css-counter

Share Improve this question Follow edited Jul 10, 2015 at 18:38 Lieutenant Dan 8,2982828 gold badges9797 silver badges216216 bronze badges asked Jul 10, 2015 at 16:03 kthornbloomkthornbloom 3,74033 gold badges3232 silver badges4747 bronze badges 4

• 1 hm... If you're using data attributes, is it possible to use content: attr(data-unit) and pletely skip the counter part? jsfiddle/jmarikle/js6gzt5q. – Joseph Marikle Commented Jul 10, 2015 at 16:10
• 1 Fun fact: if it wasn't for the fact that CSS3 attr() isn't supported anywhere, you would in fact be able to write counter-increment: list attr(data-unit integer); and it would just work. – BoltClock Commented Jul 10, 2015 at 16:14
• Yep, I could do that if that's the only way. I just have a thing that's already built using the css counters, so I was hoping I could just modify what was already there. – kthornbloom Commented Jul 10, 2015 at 16:15
• You may be thinking of this question. There are other answers that suggest writing CSS directly from a script, which works as a last resort (short of setting content directly and forgoing counters altogether). – BoltClock Commented Jul 10, 2015 at 16:20

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can actually use a css-preprocessor to pile the css.

I am giving an example below using scss:

It actually renders different counter increments for the passed numbers. This solution will work if you already know the values which are being used to increment. For example, if the values being passed are 100, 200 and 300, then you can use @each loop to pile css for those known numbers.

If you are atleast aware of range of values being passed, you can use @for loop (use it when there are limited numbers).

$values: 100, 200, 300;
@each $i in $values {
  .demo[data-num="#{$i}"]{
    & > li::before{
      counter-increment: list #{$i};
    }
  }
}

.demo {
    counter-reset: list;
}

.demo li:before {
    content: counter(list);
}

Working Fiddle (change the data-num attribute value to 200 or 300)

Here is the piled css:

.demo[data-num="100"] > li::before {
  counter-increment: list 100;
}

.demo[data-num="200"] > li::before {
  counter-increment: list 200;
}

.demo[data-num="300"] > li::before {
  counter-increment: list 300;
}

.demo {
  counter-reset: list;
}

.demo li:before {
  content: counter(list);
}

Increment the counter for each li and not :before: http://jsfiddle/7vt0kf2c/.

var myUnit = 100;
$(".demo li").css("counter-increment", "list " + myUnit);
$("button").click(function(e) {
    $(".demo li").css("counter-increment", "list " + 200);    
});

Given the accepted answer, basically the same net effect without CSS:

var myUnit = 100;
$('.demo').data('unit', myUnit);
$('.demo li').each(function () {
    $(this).text($('.demo').data('unit') * ($(this).index() + 1));
});