Some Issues You May Not Know About Customized Counter Kinds

I used to be studying by means of Juan’s current Almanac entry for the @counter-style at-rule and I’ll be darned if he didn’t uncover and unpack some extraordinarily attention-grabbing issues that we will do to fashion lists, notably the checklist marker. You’re in all probability already conscious of the ::marker pseudo-element. You’ve greater than doubtless dabbled with customized counters utilizing counter-reset and counter-increment. Or possibly your means of doing issues is to wipe out the list-style (cautious when doing that!) and hand-roll a marker on the checklist merchandise’s ::earlier than pseudo.

However have you ever toyed round with @counter-style? Seems it does a variety of heavy lifting and opens up new methods of working with lists and checklist markers.

You may fashion the marker of only one checklist merchandise

That is referred to as a “mounted” system set to a particular merchandise.

@counter-style style-fourth-item {
  system: mounted 4;
  symbols: "💠";
  suffix: " ";
}

li {
  list-style: style-fourth-item;
}

You may assign characters to particular markers

Should you go along with an “additive” system, then you may outline which symbols belong to which checklist gadgets.

@counter-style cube {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

li {
  list-style: cube;
}

Discover how the system repeats as soon as it reaches the top of the cycle and begins a brand new collection based mostly on the primary merchandise within the sample. So, for instance, there are six sides to typical cube and we begin rolling two cube on the seventh checklist merchandise, totaling seven.

You may add a prefix and suffix to checklist markers

A protracted whereas again, Chris confirmed off a strategy to insert punctuation on the finish of an inventory marker utilizing the checklist merchandise’s ::earlier than pseudo:

ol {
  list-style: none;
  counter-reset: my-awesome-counter;

  li {
    counter-increment: my-awesome-counter;

    &::earlier than {
      content material: counter(my-awesome-counter) ") ";
    }
  }
}

That’s a lot simpler as of late with @counter-styles:

@counter-style parentheses {
  system: extends decimal;
  prefix: "(";
  suffix: ") ";
}

You may fashion a number of ranges of checklist gadgets

Let’s say you may have an inventory of 10 gadgets however you solely wish to fashion gadgets 1-3. We are able to set a vary for that:

@counter-style single-range {
  system: extends upper-roman;
  suffix: ".";
  vary: 1 3;
}

li {
  list-style: single-range;
}

We are able to even prolong our personal cube instance from earlier:

@counter-style cube {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style single-range {
  system: extends cube;
  suffix: ".";
  vary: 1 3;
}

li {
  list-style: single-range;
}

One other means to try this is to make use of the infinite key phrase as the primary worth:

@counter-style cube {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style single-range {
  system: extends cube;
  suffix: ".";
  vary: infinite 3;
}

li {
  list-style: single-range;
}

Talking of infinite, you may set it because the second worth and it’ll rely up infinitely for as many checklist gadgets as you may have.

Possibly you wish to fashion two ranges at a time and embody gadgets 6-9. I’m unsure why the heck you’d wish to try this however I’m certain you (or your HIPPO) have gotten good causes.

@counter-style cube {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style multiple-ranges {
  system: extends cube;
  suffix: ".";
  vary: 1 3, 6 9;
}

li {
  list-style: multiple-ranges;
}

You may add padding across the checklist markers

You ever run right into a state of affairs the place your checklist markers are erratically aligned? That normally occurs when going from, say, a single digit to a double-digit. You may pad the marker with further characters to line issues up.

/* provides main zeroes to checklist merchandise markers */
@counter-style zero-padded-example {
  system: extends decimal;
  pad: 3 "0";
}

Now the markers will all the time be aligned… nicely, as much as 999 gadgets.

That’s it!

I simply thought these had been some fairly attention-grabbing methods to work with checklist markers in CSS that run counter (get it?!) to how I’ve historically approached this type of factor. And with @counter-style changing into Baseline “newly obtainable” in September 2023, it’s well-supported in browsers.