Styling Counters in CSS | CSS-Tricks

The system descriptor

The symbols or additive-symbols descriptors outline the characters used for the counter model, whereas system says the way to use them.

The legitimate system values are:

• cyclic
• alphabetic
• symbolic
• additive
• mounted
• extends

cyclic will undergo the characters set on symbols and repeat them. We will use only one character within the symbols to imitate a bullet record:

@counter-style cyclic-example {
  system: cyclic;
  symbols: "⏵";
  suffix: " ";
}

Or alternate between two or extra characters:

@counter-style cyclic-example {
  system: cyclic;
  symbols: "🔸" "🔹";
  suffix: " ";
}

mounted will write the characters in symbols descriptor only one time. Within the final instance, solely the primary two objects can have a customized counter if set to mounted, whereas the others will drop to their fallback, which is decimal by default.

@counter-style multiple-example {
  system: mounted;
  symbols: "🔸" "🔹";
  suffix: " ";
}

We will set when the customized counters begin by appending an <integer> to the mounted worth. For instance, the next customized counter will begin on the fourth merchandise:

@counter-style fixed-example {
  system: mounted 4;
  symbols: "💠";
  suffix: " ";
}

numeric will numerate record objects utilizing a customized positional system (base-2, base-8, base-16, and so forth.). Positional methods begin at 0, so the primary character at symbols can be used as 0, the following as 1, and so forth. Figuring out this, we are able to make an ordered record utilizing non-decimal numerical methods like hexadecimal:

@counter-style numeric-example {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "A" "B" "C" "D" "E" "F";
  suffix: ". ";
}

9. bread
10. butter
11. milk
12. apples

alphabetic will enumerate the record objects utilizing a customized alphabetical system. It’s much like the numeric system however with the important thing distinction that it doesn’t have a personality for 0, so the following digits are simply repeated. For instance, if our symbols are "A" "B" "C" they’ll wrap to "AA", "AB", "AC", then BA, BB, BC and so forth.

Since there is no such thing as a equal for 0 and unfavorable values, they’ll drop right down to their fallback.

@counter-style alphabetic-example {
  system: alphabetic;
  symbols: "A" "B" "C";
  suffix: ". ";
}

1. bread
2. butter
3. milk
4. apples
5. cinnamon

symbolic will undergo the characters in symbols repeating them yet another time every iteration. So for instance, if our symbols are "A", "B", "C", it’s going to go “A”, “B”, and “C”, double them within the subsequent iteration as “AA”, “BB”, and “CC”, then triple them as “AAA”, “BBB”, “CCC” and so forth.

Since there is no such thing as a equal for 0 and unfavorable values, they’ll drop right down to their fallback.

@counter-style symbolic-example {
  system: symbolic;
  symbols: "A" "B" "C";
  suffix: ". ";
}

1. bread
2. butter
3. milk
4. apples
5. cinnamon

additive will give characters a numerical worth and add them collectively to get the counter illustration. You may consider it as the way in which we often depend payments: if we’ve got solely $5, $2, and $1 payments, we are going to add them collectively to get the specified amount, making an attempt to maintain the variety of payments used at a minimal. So to characterize 10, we are going to use two $5 payments as a substitute of ten $1 payments.

Since there is no such thing as a equal for unfavorable values, they’ll drop right down to their fallback.

@counter-style additive -example {
  system: additive;
  additive-symbols: 5 "5️⃣", 2 "2️⃣", 1 "1️⃣";
  suffix: " ";
}

Discover how we use additive-symbols when the system is additive, whereas we use simply symbols for the earlier methods.

extends will create a customized model from one other one however with modifications. To take action, it takes a <counter-style-name> after the extends worth. For instance, we might change the decimal counter model default’s suffix to a closing parenthesis (")")`:

@counter-style extends-example {
  system: extends decimal;
  suffix: ") ";
}

1. bread
2. butter
3. milk
4. cinnamon

Per spec, “If a @counter-style makes use of the extends system, it should not include a symbols or additive-symbols descriptor, or else the @counter-style rule is invalid.”

The opposite descriptors

The unfavorable descriptor permits us to create a customized illustration for a listing’s unfavorable values. It may possibly take one or two characters: The primary one is prepended to the counter, and by default it’s the hyphen-minus ("-"). The second is appended to the image. For instance, we might enclose unfavorable representations into parenthesis (2), (1), 0, 1, 2:

@counter-style negative-example {
  system: extends decimal;
  unfavorable: "(" ")";
}

-2. bread
-1. butter
0. milk
1. apples

The prefix and suffix descriptors enable us to prepend and append, respectively, a personality to the counter illustration. We will use it so as to add a personality firstly of every counter utilizing prefix:

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

The vary descriptor defines an inclusive vary by which the counter model is used. We will outline a bounded vary by writing one <integer> subsequent to a different. For instance, a spread of 2 4 will have an effect on components 2, 3, and 4:

@counter-style range-example {
  system: cyclic;
  symbols: "‣";
  suffix: " ";
  vary: 2 4;
}

• bread
• butter
• milk
• apples
• cinnamon

Then again, utilizing the infinite worth we are able to unbound the vary to at least one aspect. For instance, we might write infinite 3 so all objects as much as 3 have a counter model:

@counter-style range-example {
  system: alphabetic;
  symbols: "A" "B" "C";
  suffix: ". ";
  vary: infinite 3;
}

• bread
• butter
• milk
• apples
• cinnamon

The pad descriptor takes an <integer> that represents the minimal width for the counter and a personality to pad it. For instance, a zero-padded counter model would appear like the next:

@counter-style pad-example {
  system: extends decimal;
  pad: 3 "0";
}

The fallback descriptor permits you to outline which counter model needs to be used as a fallback every time we are able to’t characterize a particular depend. For instance, the next counter model is mounted and can fallback to lower-roman after the sixth merchandise:

@counter-style fallback-example {
  system: mounted;
  symbols: "⚀" "⚁" "⚂" "⚃";
  fallback: lower-roman;
}

• bread
• butter
• milk
• apples
• cinnamon

Lastly, the speak-as descriptor hints to speech readers on how the counter model needs to be learn. It may be:

• auto Makes use of the system default.
• bullets reads an unordered record. By default, cyclic methods are learn as bullets
• numbers reads the counter’s numeric worth within the content material language. By default, additive, mounted, numeric, and, symbolic are learn as numbers.
• phrases reads the counter illustration as phrases.
• spell-out reads the counter illustration letter by letter. By default, alphabetic is learn as spell-out.
• <counter-style-name> It can use that counter’s speak-as worth.

@counter-style speak-as-example {
  system: extends decimal;
  prefix: "Merchandise ";
  suffix: " is ";
  speak-as: phrases;
}

symbols()

The symbols() operate defines an only-use counter model with out the necessity to do an entire @counter-style, however at the price of lacking some options. It may be used contained in the list-style-type property and the counter() and counters() capabilities.

ol {
  list-style-type: symbols(cyclic "🥬");
}

Nevertheless, its browser help is appalling because it’s solely supported in Firefox.