Some Things You Might Not Know About Custom Counter Styles

Juan recently revealed some extremely interesting things about style lists (particularly list markers) in his yearbook entry on the rules. You may have already learned about the @counter-style pseudo-element. You've most likely tried using ::marker and counter-reset custom counters. Alternatively, your approach might be to clear counter-increment (be careful to do this!) and manually scroll the mark on the list-style pseudo-element of the list item. ::before

But have you tried

? It turns out it does a lot of heavy work and opens up new ways to use lists and list tags. @counter-style

Set the marking style for only one list item

This is called a "fixed" system set to a specific project.

@counter-style style-fourth-item {
  system: fixed 4;
  symbols: "?";
  suffix: " ";
}

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

Assign characters to specific tags

If you use the "Accumulation" system, you can define which symbols belong to which list items.

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

li {
  list-style: dice;
}

Note that once the system reaches the end of the loop, it repeats and starts a new sequence based on the first item in the pattern. For example, a typical dice has six sides, and we start rolling two dices on the seventh list item, a total of seven.

Add a prefix and a suffix to the list tag

Long ago, Chris showed a way to insert punctuation marks at the end of a list mark using a pseudo-element of a list item:

::before

It's easier to use

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

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

    &::before {
      content: counter(my-awesome-counter) ") ";
    }
  }
}

now:

@counter-styles

Set the style of multiple list items range

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

Suppose you have a list of 10 items, but you just want to style items 1-3. We can set a range for this:

We can even expand our own dice examples before:

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

li {
  list-style: single-range;
}

Another way is to use the

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

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

li {
  list-style: single-range;
}

keyword as the first value:

infinite

Speaking of

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

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

li {
  list-style: single-range;
}

, you can set it to the second value, which will count unlimitedly based on the number of list items you have.

infinite Maybe you want to style two ranges at once and include items 6-9. I'm not sure why you want to do this, but I believe you (or your HIPPO) have good reasons.

Add padding to list markers

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

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

li {
  list-style: multiple-ranges;
}

Have you ever encountered uneven alignment of list marks? This usually happens from one to two digits. You can fill the mark with extra characters to align the content.

Now the marks will always align...well, up to 999 items.

/* 为列表项标记添加前导零 */
@counter-style zero-padded-example {
  system: extends decimal;
  pad: 3 "0";
}

Summary

I think these are some very interesting ways to use list tags in CSS, which are better than what I have traditionally dealt with such problems. And as

becomes the baseline "newly available" feature in September 2023, it is well supported in the browser.

@counter-style

The above is the detailed content of Some Things You Might Not Know About Custom Counter Styles. For more information, please follow other related articles on the PHP Chinese website!