CSS @counter-style regel

Definitie en gebruik

CSS @counter-style De regel wordt gebruikt om een aangepaste tellerstijl te definiëren.

Wanneer de vooraf gedefinieerde stijl niet aan de behoeften voldoet:@counter-style De regel staat u toe om een aangepaste tellerstijl te definiëren.

Voorbeeld

Stel een aangepaste tellerstijl in voor de lijst:

@counter-style crown {
  system: cyclic;
  symbols: "\1F451";
  suffix: " ";
}
ul {
  list-style: crown;
}

Probeer het zelf

CSS syntax

@counter-style countername {
  one or more descriptors
}

Attribute value

Value Description
countername

Define the case-sensitive name of the counter style.

Note: The counter name cannot be: none, decimal, disc, square, circle, disclosure-open, or disclosure-closed.
system

Define the algorithm to convert the integer value of the counter to a string.

If the system is set to: cyclic, numeric, alphabetic, symbolic, or fixed, then the symbols descriptor is required.

If the system is set to: additive, then the additive-symbols descriptor is required.
symbols

Define the symbols used for marking (which can be a string, image, or custom identifier).

It is required if the system descriptor is set to cyclic, numeric, alphabetic, symbolic, or fixed.

HTML UTF-8 symbols.
additive-symbols

Define the additive tuple of the additive system.

An additive counter system (such as Roman numerals) consists of a series of weighted symbols.

The descriptor is a list of counter symbols in descending order of weight and their non-negative integer weights.

It is required if the system descriptor is set to additive.
negative Define the prefix or suffix symbol to be appended when the value is negative.
prefix Define the prefix symbol to be appended to the mark representation.
suffix Define the suffix symbol to be appended to the mark representation.
range

Define the value range of the counter style.

If the counter value is out of range, it falls back to its alternative style.
pad

If the mark indicates that it must have a minimum length, use this descriptor.

For example, if you want the counter to start from 01 and then 02, 03, 04, etc., use the pad descriptor.

For counters greater than the specified pad value, the mark will be constructed normally.
speak-as

Define how the speech synthesizer should read out the counter style.

For example, for ordered lists, read out as numbers or letters; for unordered lists, read out as audio prompts.
fallback

Define the counter name to fall back to when the system cannot construct a mark or is out of the specified range.

If an alternative counter or an alternative system cannot represent the counter value, it falls back to decimal style.

Browser support

The numbers in the table indicate the first browser version that fully supports the @ rule.

Chrome Edge Firefox Safari Opera
91 91 33 17 77