Styling Counters in CSS | CSS-Methods

The system descriptor

The symbols or additive-symbols descriptors outline the characters used for the counter fashion, whereas system says find out how to use them.

The legitimate system values are:

• cyclic
• alphabetic
• symbolic
• additive
• fastened
• 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: " ";
}

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

@counter-style multiple-example {
  system: fastened;
  symbols: "" "";
  suffix: " ";
}

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

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

numeric will numerate record gadgets utilizing a customized positional system (base-2, base-8, base-16, and so on.). Positional techniques begin at 0, so the primary character at symbols will probably be used as 0, the following as 1, and so forth. Figuring out this, we will make an ordered record utilizing non-decimal numerical techniques 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 gadgets 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 destructive 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 another time every iteration. So for instance, if our symbols are "A", "B", "C", it’ll 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 destructive 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’ll be able to consider it as the way in which we often depend payments: if we now have solely $5, $2, and $1 payments, we are going to add them collectively to get the specified amount, attempting to maintain the variety of payments used at a minimal. So to symbolize 10, we are going to use two $5 payments as an alternative of ten $1 payments.

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

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

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

extends will create a customized fashion from one other one however with modifications. To take action, it takes a <counter-style-name> after the extends worth. For instance, we may change the decimal counter fashion 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 destructive descriptor permits us to create a customized illustration for a listing’s destructive values. It could 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 may enclose destructive representations into parenthesis (2), (1), 0, 1, 2:

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

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

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

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

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

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

• bread
• butter
• milk
• apples
• cinnamon

Alternatively, utilizing the infinite worth we will unbound the vary to 1 aspect. For instance, we may write infinite 3 so all gadgets as much as 3 have a counter fashion:

@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 fashion would appear like the next:

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

The fallback descriptor permits you to outline which counter fashion needs to be used as a fallback at any time when we will’t symbolize a particular depend. For instance, the next counter fashion is fastened and can fallback to lower-roman after the sixth merchandise:

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

• bread
• butter
• milk
• apples
• cinnamon

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

• auto Makes use of the system default.
• bullets reads an unordered record. By default, cyclic techniques are learn as bullets
• numbers reads the counter’s numeric worth within the content material language. By default, additive, fastened, 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 is going to 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 fashion with out the necessity to do a complete @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.